时间戳

首页 > 解决方案 > 角度多级子路由

routing - 角度多级子路由

问题描述

我有以下按模块分组的配置路由：

在上面：

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 段：'Content/Apps/Details/Portal-Web-Drupal/inf

任何人都知道我为什么会收到这个错误？

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

也许，问题是我不能有超过两层的路由器插座，我有三个：

标签： routingangular6

解决方案

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

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

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

ApplicationTabContainerComponent 缺少childrenor loadChildrenroute 属性。否则，没有任何东西可以将 Applications 模块中定义的路由绑定到该路由。

在没有代码的情况下获得正确的语法有点挑战性......但它看起来像这样：

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

推荐阅读