notFound页面的angular2路由答案

【问题标题】：angular2 route for notFound pagenotFound页面的angular2路由
【发布时间】：2017-03-29 08:25:54
【问题描述】：

我尝试使用儿童路线。我的主要路由模块（在根目录中）：

import { NgModule }             from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProfileComponent } from './profile/profile.component';
import { NotFoundComponent } from './notfound/notfound.component';
import { LoggedInGuard } from './login-guard/login-guard.component';

const routes: Routes = [
    {path: '', redirectTo: 'home', pathMatch: 'full'},
    {path: 'home', component: HomeComponent, pathMatch: 'full'},
    {path: 'profile', component: ProfileComponent, canActivate: [LoggedInGuard], canLoad: [LoggedInGuard]},
    {path: '**', component: NotFoundComponent},
];
@NgModule({
    imports: [ RouterModule.forRoot(routes) ],
    exports: [ RouterModule ]
})
export class AppRoutingModule {}

和子路由模块（在子目录中）：

import { NgModule }     from '@angular/core';
import { RouterModule } from '@angular/router';

import { PPComponent } from './pp.component';
import { MembersComponent } from './members/members.component';
import { HistoryComponent } from './history/history.component';


@NgModule({
  imports: [
    RouterModule.forChild([
      {
        path: 'partner-program',
        component: PPComponent,
        children: [
          {
            path: '',
            redirectTo: 'members',
            pathMatch: 'full'
          },
          {
            path: 'members',
            component: MembersComponent,
          },
          {
            path: 'history',
            component: HistoryComponent,
          },
        ]
      },


    ])
  ],
  exports: [
    RouterModule
  ]
})
export class PPRoutingModule { }

我对这条路线有疑问{path: '**', component: NotFoundComponent}。 Angular2 在任何子路由之前看到这条路由。结果 url 'http://localhost:3000/partner-program' 显示 notFound 组件。如果我删除 notFound 路线，'http://localhost:3000/partner-program' 工作正常。我如何声明 notFound 路由并说 Angular2 在最后一轮检查它（在子路由之后）？

Günter Zöchbauer，你的意思是这样吗？

RouterModule.forChild([
      {
        path: '',
        children: [
          {
            path: 'partner-program',
            component: PPComponent,
            children: [
              {
                path: '',
                redirectTo: 'members',
                pathMatch: 'full'
              },
              {
                path: 'members',
                component: MembersComponent,
              },
              {
                path: 'history',
                component: HistoryComponent,
              },
            ]
          }
        ]
      }
    ])

【问题讨论】：

我认为您的 PPRoutingModule 路由未正确配置为子路由。子路由必须是父路由的子路由。 'http://localhost:3000/partner-program' 只能匹配 ` {path: '', redirectTo: 'home', pathMatch: 'full'}, `（空路径）的子路由，但不是。

标签： angular routing

【解决方案1】：

当您将这些模块导入主模块时，请确保最后添加了 AppRoutingModule。都是关于路由注册的顺序

【讨论】：