代码之家  ›  专栏  ›  技术社区  ›  zed

angular6:延迟加载时引导模块组件

  •  0
  • zed  · 技术社区  · 6 年前

    说明

    我有一个辅助模块,它为内部模块提供了一个共享的逻辑/视图(为了简单起见,在本例中添加了一个页脚)。

    结构如下:

    • App.模块
      • 容器模块
        • 内部1.模块
        • 内部2.模块

    app.routing ,模块 app 延迟加载到 container 模块本身:

      {
        path: 'inner1',
        loadChildren: 'app/container/container.module#ContainerModule'
      },
      {
        path: 'inner2',
        loadChildren: 'app/container/container.module#ContainerModule'
      },
    

    同时 container.routing.ts 选择正确的组件:

      {
        path: 'inner1',
        component: Inner1Component,
      },
      {
        path: 'inner2',
        component: Inner2Component,
      }
    

    container.module 引导自己的组件:

      bootstrap: [
        ContainerComponent
      ]
    

    在哪里? container.component.html 有一个 router-outlet 以及页脚:

    <router-outlet></router-outlet>
    <footer>
       // Stuff here
    </footer>
    

    现在 问题

    当路线是 inner1 , container.component 从未真正激活,页脚也从未显示。看来 路由器出口 属于 app.component.html 直接显示 inner1.component.html

    目标

    app.module 要显示的路由器 容器.组件 其出口中的内容,以及 容器模块 要显示的路由器 inner1.component 在里面 容器.组件 的出路。

    如何才能做到这一点?

    0 回复  |  直到 6 年前