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-Site-App/info，则会收到以下错误消息：

无法匹配任何路线。 URL段：“内容/应用/详细信息/ Portal-Web-Drupal / inf

有人知道为什么我会收到该错误吗？

我已经按照这种方式构造了模块，因为ContentComponent是在第一个路由器出口（它具有导航栏（它是静态内容）和ContentComponent）上呈现的。 ContentComponent具有一个路由器出口，该出口呈现了DocumentationDocument或ApplicationListComponent或NewApplicationComponent或ApplicationTabContainerComponent。 ApplicationTabContainerComponent具有一个路由器出口，可以呈现ApplicationDetailComponent或FileManagerComponent。

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

祖父母是应用程序的路由器出口，呈现内容组件
父级（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

角度多级子路由

1 个答案: