使用子路由进行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

简单的解决方案是重新排序＆＃39;进口＆＃39; app模块文件中的数组 - 确保app / root路由器是数组中的最后一项;例如

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

Answer 3

我有以下示例给你。 / - 路由重定向到/app - 路线，并在您的父StartComponent的{​​{1}}内显示<router-outlet>。 AppComponent本身在其模板中有另一个StartComponent，路由器在其中加载子组件。

<router-outlet>

最后一条路由是带有const appRoutes: Routes = [ { path: '', redirectTo: 'app', pathMatch: 'full', }, { path: 'app', component: StartComponent, children: [ { path: '', redirectTo: 'welcome' }, { path: 'welcome', component: WelcomeComponent }, { path: 'settings', component: SettingsComponent }, ] }, { path: '**', component: PageNotFoundComponent } ]; 路径的通配符路由。如果您导航到**等未知网址或子组件/test123，则会显示。

/app/test123表示路由器正在寻找相同的路由。这对重定向非常重要。

如果您的孩子也需要pathMatch: 'full'，您也可以为他们添加通配符。

PageNotFoundComponent