Angular 2 路由器通配符处理与子路由

Question

当使用 angular2 的路由器“3.0”的子路由时，无需在父路由器配置中声明它们（之前，您必须在父组件中执行类似 /child... 的操作）。

我想配置一个全局“找不到页面”处理程序，我可以这样做：

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

在我的应用路由模块中。

警告：如果我这样做，路由器会导航到在 PageNotFoundComponent 之前的应用程序路由模块中声明的路由。但是当我尝试访问子路由时它总是导航到通配符路由（在某些子路由模块中使用RouterModule.forChild 声明。

直观地说，通配符路由应该放在所有其他路由配置之后，因为路由器按声明顺序解析。但是似乎没有办法在子路由之后声明它。在所有子路由器模块中声明通配符路由似乎也不是很优雅。

我是否遗漏了什么，或者在使用子路由时无法在 Angular-2-Router-3 中定义全局 404 页面？

Answer 1

您可以轻松地使用集中式通配符路由，即用于站点范围的“未找到页面”组件。只需将其提取到一个单独的路由模块中，该模块会被包含在所有其他包含子路由的模块之后。

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

通配符路由模块或'page not found'路由模块：

@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 路由器是数组中的最后一项；例如

@NgModule({ 进口：[FeatureModule1，FeatureModule2，FeatureModule3，AppRouterModule] ... ... })

Answer 3

我为您准备了以下示例。 /-route 重定向到 /app-route 并在您的父 AppComponent 的 <router-outlet> 内显示 StartComponent。 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 
    }    
];

最后一个路由是带有**-path 的通配符路由。如果您导航到未知的 URL，例如 /test123 或子组件 /app/test123，它将显示。

pathMatch: 'full' 表示路由器正在寻找相等的路由。这对重定向很重要。

如果您的孩子还需要PageNotFoundComponent，您也可以为他们添加通配符。

{
    path: 'app',
    component: StartComponent,
    children: [
        {
            path: '',
            redirectTo: 'welcome'
        },
        {
            path: 'welcome',
            component: WelcomeComponent
        },    
        {
            path: '**',
            component: ChildrenPageNotFoundComponent
        },      
    ]
}