使用子路由处理Angular 2路由器通配符

Question

当使用带有angular2的路由器"3.0"的子路由时,不需要在父路由器配置中声明它们(之前,您必须执行类似于/child...父组件的操作).

我想配置一个全局的"找不到页面"处理程序,我可以这样做:

{ path: '**', component: PageNotFoundComponent }

在我的应用路由模块中.

警告:如果我这样做,路由器会导航到应用程序路由模块中声明的路由,然后才能PageNotFoundComponent正常运行.但是当我尝试访问子路由时(RouterModule.forChild在某些子路由模块中使用声明),它总是导航到通配符路由.

直观地说,通配符路由应该放在所有其他路由配置的后面,因为路由器以声明顺序解析.但是在儿童路线之后似乎没有办法宣布它.在所有子路由器模块中声明通配符路由似乎也不是很优雅.

我是否遗漏了某些内容,或者在使用子路由时是否无法在Angular-2-Router-3中定义全局404页面？

Answer 1

您可以轻松拥有集中式通配符路由,即站点范围内的"找不到页面"组件.它只需要被提取到一个单独的路由模块中,该模块将包含在包含子路由的所有其他模块之后.

因此,通配符路由确实位于最后位置,并且不会隐藏来自任何后续模块的路由.

通配符路由模块或"找不到页面"路由模块:

@NgModule({
    imports: [
        RouterModule.forChild([
            {
                path: '**',
                component: NotFoundComponent
            }
        ])
    ],
    declarations: [
        NotFoundComponent
    ],
    exports: [
        RouterModule
    ]
})
export class WildcardRoutingModule { }

应用模块:

@NgModule({
    imports: [
        BrowserModule,

        AppRoutingModule, // Has forRoot routes 

        HomeModule, // Has forChild routes 
        LoginModule, // Has forChild routes
        ProductModule, // Has forChild routes
        DiagnosticsModule, // Has forChild routes

        WildcardRoutingModule // Last position
    ],
    declarations: [
        AppComponent  
    ],
    providers: [
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

Answer 2

简单的解决方案是在app模块文件的'imports'数组中重新排序模块 - 确保app/root router是数组中的最后一项; 例如

@NgModule({
  imports: [FeatureModule1, FeatureModule2, FeatureModule3, AppRouterModule]
  ...
  ...
})