带儿童的Angular 5懒人装载路线模块

时间:2018-06-10 20:13:21

标签: angular angular-routing angular-route-segment

我很难弄清楚为什么 TEST 1 孩子没有加载当前组件

在路由到 Test1ChildComponent 之后显示

Test1ListComponent 视图。 URL更改,但 Test1ChildComponent 视图未加载

路由树:

应用-routing.module

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full'
  },
  {
    path: 'app',
    loadChildren: './core/core.module#CoreModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

芯routing.module

const routes: Routes = [
  {
    path: '',
    redirectTo: '/', 
    pathMatch: 'full'
  },
  {
    path: 'test1',
    loadChildren: '../test1/test1.module#Test1Module'
  },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class CoreRoutingModule { }

TEST1-routing.module

const routes: Routes = [
  {
    path: '',
    redirectTo: 'test1',
    pathMatch: 'full'
  },
  {
    path: '',
    component: Test1ListComponent,
    data: {
      displayName: 'Test1'
    },
    children: [
      {
        path: 'test1/:testId',
        component: Test1ChildComponent,
        data: {
          displayName: 'Test1Child'
        },
    children: [
          {
            path: 'test2/:testId',
            component: Test2hildComponent,
            data: {
              displayName: 'Test2Child'
            }
          }
        ]
      }
    ]
  },
];

1 个答案:

答案 0 :(得分:0)

const routes: Routes = [
  {
    path: '',
    redirectTo: 'test1',
    pathMatch: 'full'
  },
  {
    path: 'test1',
    component: Test1ListComponent,
    data: {
      displayName: 'Test1'
    },
    children: [
      {
        path: '',
        redirectTo: 'test1',
        pathMatch: 'full'
      },
      {
        path: 'test1/:testId',
        component: Test1ChildComponent,
        data: {
          displayName: 'Test1Child'
        },
        children: [
          {
            path: 'test2/:testId',
            component: Test2hildComponent,
            data: {
              displayName: 'Test2Child'
            }
          }
        ]
      }
    ]
  },
];