角度2如何重定向到404或其他路径，如果路径不存在

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

我尝试研究有一些方法，角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/然后它工作，它返回我一个空的页面，你如何处理这种情况发生？

182278 次浏览
小开
最佳答案

用于版本2.2.2和更新的版本

在版本2.2.2及以上版本中，姓名属性不再存在，因此不应该使用它来定义路由。应该使用 路径而不是 姓名，在路径上需要使用 没有前导斜杠。在这种情况下，使用 path: '404'而不是 path: '/404':

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

对于年龄超过 v2.2.2的版本

你可使用 {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']}

如果没有路径匹配，则重定向到 NotFound路径

小开

就像 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错误页面;)。

小开

当 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' }
];
小开

My preferred option on 2.0版本 and up is to create a 404 route and also allow a ** route path to resolve to the same component. This allows you to log and display more information about the invalid route rather than a plain redirect which can act to hide the error.

简单的404例子:

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

To display the incorrect route information add in import to router within 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路由。

语法就像

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

谢谢你


提交答案