角度多级子路由

Question

我得到了以下按模块分组的配置路线：

顶部：

imports: [
ContentModule,
RouterModule.forRoot([
{ path: 'Home', component: HomeComponent },
{ path: '', component: HomeComponent, pathMatch: 'full' }
])

下一个模块(ContentModule)：

imports: [
ApplicationsModule,
RouterModule.forChild([
{
path: 'Content', component: ContentComponent, canActivate: [AuthGuardService], children:
[
{ path: 'Apps/List', component: ApplicationListComponent, canActivate: [AuthGuardService], resolve: { applications: ApplicationListResolver } },
{ path: 'Apps/Details/:applicationID', component: ApplicationTabContainerComponent, canActivate: [AuthGuardService] },
{ path: 'Apps/NewApp', component: NewApplication, canActivate: [AuthGuardService] },
{ path: 'Documentation', component: DocComponent },
{ path: '', redirectTo: 'App/List', pathMatch: 'full' },
{ path: '**', redirectTo: 'App/List' }
]
}
])

最后一个模块(ApplicationsModule)：

imports: [
RouterModule.forChild([
{ path: 'info', component: ApplicationDetailComponent, canActivate: [AuthGuardService], resolve: { application: ApplicationDetailResolver } },
{ path: 'CDN', component: FileManager, canActivate: [AuthGuardService], resolve: { fileStorageData: FileManagerResolver } },
{ path: '', redirectTo: 'info', pathMatch: 'full' }
])

好吧，如果我去http://localhost:8253/Content/Apps/Details/Web-网站应用程序/信息我得到以下错误：

无法匹配任何路由。URL段：'Content/Apps/Details/Portal Web Drupal/inf

有人知道我为什么会出现这个错误吗？

我以这种方式构建模块，因为ContentComponent是在第一个路由器出口上呈现的(它有导航栏(它是静态内容)和ContentComponent)。ContentComponent有一个路由器出口，用于呈现DocumentationComponent或ApplicationListComponent或NewApplicationComponent或ApplicationTabContainerComponent。ApplicationTabContainerComponent有一个路由器出口，可以呈现ApplicationDetailComponent或FileManagerComponent。

也许，问题是我不能有超过两个级别的路由器出口，而我有三个：

• 祖父母是应用程序的路由器出口，用于呈现内容组件
• parent(ContentComponent)是一个路由器出口，用于呈现applicationList或newApplication或applicationTabContainer
• 作为在ApplicationTabContainerComponent路由器出口内部呈现的组件的子级

Answer 1

要建立层次结构，需要两件事：

1) 父组件中的路由器出口(听起来像你有)。

2) 父路由的children属性(当在模块中定义路由时)或loadChildren属性(当路由在单独的模块中定义时)，用于让路由器知道哪些路由是子路由。

ApplicationTabContainerComponent缺少children或loadChildren路由属性。否则，就无法将应用程序模块中定义的路由与该路由相关联。

在没有代码的情况下获得正确的语法有点困难。。。但它看起来像这样：

imports: [
RouterModule.forChild([
{
path: 'Content', component: ContentComponent, canActivate: [AuthGuardService], children:
[
{ path: 'Apps/List', component: ApplicationListComponent, canActivate: [AuthGuardService], resolve: { applications: ApplicationListResolver } },
{ 
path: 'Apps/Details/:applicationID', 
component: ApplicationTabContainerComponent, 
canActivate: [AuthGuardService],
loadChildren: './yourpath/applications.module#ApplicationsModule`
},
{ path: 'Apps/NewApp', component: NewApplication, canActivate: [AuthGuardService] },
{ path: 'Documentation', component: DocComponent },
{ path: '', redirectTo: 'App/List', pathMatch: 'full' },
{ path: '**', redirectTo: 'App/List' }
]
}
])

这个语法可能并不完全正确，但应该会给你一些想法。(我只在无组件路由上使用过loadChildren。)

我在这里举一个例子：https://www.youtube.com/watch?v=LaIAHOSKHCQ