时间戳

首页 > 解决方案 > 使用 Angular 路由，为什么路由模块的模板不包装 router-outlet 的内容？

angular - 使用 Angular 路由，为什么路由模块的模板不包装 router-outlet 的内容？

问题描述

示例 - https://stackblitz.com/edit/angular-vxshab

当Appsite作为组件加载时，https://angular-vxshab.stackblitz.io/app-component/sample它可以按照我正确考虑的方式工作，输出如下，

[begin] app-component
[begin] appsite-component
[begin] sidenav

sample works!
[end] sidenav
[end] appsite-component
[end] app-component

该路线加载的片段来自app-routing.module.ts,

  {
    path: 'app-component',
    component: AppsiteComponent,
    children: [
      {
        path: 'sample',
        loadChildren: () => import('./sample/sample.module')
          .then(mod => mod.SampleModule)
      }
    ]
  }

我希望它是延迟加载的，并且所有的路由都是自包含的appsite-routing.module.ts，

  {
    path: 'app',
    loadChildren: () => import('./appsite/appsite.module')
      .then(mod => mod.AppsiteModule)
  }

但是来自https://angular-vxshab.stackblitz.io/app/sample的结果，我得到了我认为不正确的输出，

[begin] app-component
sample works!

[end] app-component

appsite-component 和 sidenav 都没有“包装”sample-component的内容（它的行为就像rawsite-routing.module.ts设计的那样）。

有趣的是，我确信我以前做过这件事，是偶然的，但对于我的一生，我现在想不通。

应用组件.html

<div>[begin] app-component</div>
<router-outlet></router-outlet>
<div>[end] app-component</div>

app-appsite.html

<div>[begin] app-appsite</div>
<app-sidenav></app-sidenav>
<div>[end] app-appsite</div>

sidenav-component.html

<div>[begin] sidenav</div>
<router-outlet></router-outlet>
<div>[end] sidenav</div>

示例.html

<p>sample works!</p>

标签： angularangular-routingangular-module

解决方案

推荐阅读