Angular 2如果路径不存在,如何重定向到404或其他路径

Question

/如果角度2中不存在路径,我试图重定向404 其他路径

我尝试研究有角度1的一些方法但不是角度2.

这是我的代码:

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

所以例如,如果我重定向到/news/page/它然后它工作,它返回一个空页面你如何处理这种情况发生？

Answer 1

您可以使用 path: '404'

喜欢:

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

如果没有路径匹配则重定向到path: '/404'路径

针对v2.2.2进行了更新

在版本v2.2.2的路由中,名称属性不再存在.route define没有name属性.所以你应该使用路径而不是名称, {path: '/*path', redirectTo: ['redirectPathName']}并且路径没有前导斜杠,所以使用NotFound而不是path: '404'

喜欢:

{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']}

Answer 2

随着Angular继续发布,我遇到了同样的问题.根据2.1.0版,Route界面如下所示:

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;
} 

所以我的解决方案如下:

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

Answer 3

我在2.0.0及更高版本上的首选选项是创建404路由,并允许**路径路径解析为同一个组件.这允许您记录和显示有关无效路由的更多信息,而不是可以用于隐藏错误的普通重定向.

简单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.

Answer 4

正如shaishab roy所说,在备忘单中你可以找到答案.

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

{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错误页面;).

Answer 5

确保使用代码底部写的 404 路由。

语法就像

{
    path: 'page-not-found', 
    component: PagenotfoundComponent
},
{
    path: '**', 
    redirectTo: '/page-not-found'
},

谢谢