Angular 2如果path不存在,如何redirect到404或其他path

我试图redirect404 /其他path,如果path不存在angular2

我试图研究有一些方法angular1,但不angular2。

这是我的代码:

 @RouteConfig([ { path: '/news', name: 'HackerList', component: HackerListComponent, useAsDefault: true }, { path: '/news/page/:page', name: 'TopStoriesPage', component: HackerListComponent }, { path: '/comments/:id', name: 'CommentPage', component: HackerCommentComponent } ]) 

因此,例如,如果我redirect到/news/page/然后它的工作,它返回给我一个空的页面,你如何处理这种情况下发生?

5 Solutions collect form web for “Angular 2如果path不存在,如何redirect到404或其他path”

你可以使用{path: '/*path', redirectTo: ['redirectPathName']}

喜欢:

 {path: '/home/...', name: 'Home', component: HomeComponent} {path: '/', redirectTo: ['Home']}, {path: '/user/...', name: 'User', component: UserComponent}, {path: '/404', name: 'NotFound', component: NotFoundComponent}, {path: '/*path', redirectTo: ['NotFound']} 

如果没有path匹配,则redirect到NotFoundpath

更新了v2.2.2

在版本v2.2.2 名称属性的路由不再存在。 路由定义没有名称属性。 所以你应该使用path而不是名称 redirectTo: '/redirectPath'没有前导斜杠的path,所以使用path: '404'而不是path: '/404'

喜欢:

  {path: '404', component: NotFoundComponent}, {path: '**', redirectTo: '/404'} 

随着Angular的发布,我面临着同样的问题。 根据版本2.1.0Route接口看起来像:

 export interface Route { path?: string; pathMatch?: string; component?: Type<any>; redirectTo?: string; outlet?: string; canActivate?: any[]; canActivateChild?: any[]; canDeactivate?: any[]; canLoad?: any[]; data?: Data; resolve?: ResolveData; children?: Route[]; loadChildren?: LoadChildren; } 

所以我的解决scheme如下:

 const routes: Routes = [ { path: '', component: HomeComponent }, { path: '404', component: NotFoundComponent }, { path: '**', redirectTo: '404' } ]; 

正如shaishab roy所说,在备忘单中你可以find答案。

但在答复中,给出的答复是:

 {path: '/home/...', name: 'Home', component: HomeComponent} {path: '/', redirectTo: ['Home']}, {path: '/user/...', name: 'User', component: UserComponent}, {path: '/404', name: 'NotFound', component: NotFoundComponent}, {path: '/*path', redirectTo: ['NotFound']} 

由于某些原因,它不适合我,所以我试着改为:

 {path: '/**', redirectTo: ['NotFound']} 

它的工作。 要小心,不要忘记,你需要把它放在最后,否则你会经常有404错误页面;)。

我在2.0.0以上的首选选项是创build一个404路由,也允许**pathpathparsing到相同的组件。 这允许您logging和显示有关无效路由的更多信息,而不是可以隐藏错误的纯redirect。

简单的404例子:

 { path '/', component: HomeComponent }, // All your other routes should come first { path: '404', component: NotFoundComponent }, { path: '**', component: NotFoundComponent } 

要显示不正确的路由信息​​,请将其导入NotFoundComponent中的路由器:

import { Router } from '@angular/router';

将它添加到NotFoundComponent的构造器中:

constructor(public router: Router) { }

然后,您就可以从HTML模板中引用它了

The page <span style="font-style: italic">{{router.url}}</span> was not found.

使您的默认路由您的404或页面与控制器,做一个艰难的JavaScriptredirect。

  • 使用routerLink的Angular 2unit testing组件