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

适用于版本v2.2.2及更新版本

在版本v2.2.2及更高版本中， name 属性不再存在，不应用于定义路径。应该使用 path 而不是 name 并且路径上不需要前导斜杠。在这种情况下，请使用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路径

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'
},

谢谢

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

5 个答案: