Question

我想在DOM中具有以下结构：

<myapp-root>
  <router-outlet></router-outlet>

  <myapp-user-management>
    <router-outlet></router-outlet>
    <myapp-users></myapp-users>
  </myapp-user-management>

</myapp-root>

（1）我像这样在 root-routing.module.ts 中为UserManagementModule进行了延迟加载

const rootRoutes: Routes = [
  {
    ...
    children: [
      ...
      {
        path: 'userManagement', 
        loadChildren: '../user-management/user-management.module#UserManagementModule'
      },
      ...
    ]
  }
];

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

然后我将路由模块导入RootModule

@NgModule({
  ...
  imports: [
    ...
    RootRoutingModule,
    ...
  ]
})
export class RootModule {
}

root.component.html有一个<router-outlet></router-outlet>

（2）之后，我想渴望加载UsersModule。所以我在 user-management-routing.module.ts 中拥有

const userManagementRoutes: Routes = [
  {
    path: '',
    component: UserManagementComponent
  }
];


@NgModule({
  declarations: [],
  imports: [
    RouterModule.forChild(userManagementRoutes)
  ],
  exports: [RouterModule]
})
export class UserManagementRoutingModule { }

并且在 user-management.module.ts 中，我拥有

@NgModule({
  imports: [
    UsersModule,
    UserManagementRoutingModule
  ]
})
export class UserManagementModule { }

user-management.component.html有一个<router-outlet></router-outlet>

（3）然后，我编写了如下的 users-routing.module.ts

const usersRoutes: Routes = [
  {
    path: 'users',
    component: UsersComponent
  }
];

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forChild(usersRoutes)
  ],
  exports: [RouterModule]
})
export class UsersRoutingModule {
}

和 users.module.ts 如下

@NgModule({
  declarations: [
    UsersComponent
  ],
  imports: [
    CommonModule,
    UsersRoutingModule,
  ],
  exports: [
  ]
})
export class UsersModule { }

问题是它呈现

<myapp-root>
  <router-outlet></router-outlet>
  <myapp-users></myapp-users>
</myapp-root>

我做错了什么？

角度：急切的加载使组件无法渲染

0 个答案: