Question

示例-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旨在那样）。

有趣的是，我确定我以前是偶然做到的，但是为了我的生命，我现在无法弄清楚。

app-component.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>

sample.html

<p>sample works!</p>

使用Angular路由，路由模块的模板为什么不包装路由器出口的内容？

0 个答案: