无辅助路由的角度多路由器出口

Question

有什么方法可以<router-outlet>在角度组件上使用多个条目，并根据路由加载不同的组件/模块？

我已经设法使用Outlet Context和Template Variablereferences来做到这一点，但这给处理辅助路由带来了很多复杂性。

我的主要目标是根据用户所在的路线加载不同的标头组件/模块（最好是延迟加载），与主组件/模块的<router-outlet>工作方式相同。

下面的例子不起作用。还有其他方法可以实现这一目标吗？

app.component.html

<div class="application-wrapper">
  <header>
    <router-outlet name="header"></router-outlet>
  </header>
  
  <main>
    <router-outlet></router-outlet>
  </main>

  <footer>...</footer>
</div> 

app-routing.module.ts

//...
const routes: Routes = [
  {path: '', pathMatch: 'full', redirectTo: 'intro'},
  {
    path: 'intro',
    component: IntroComponent
  },
  {
    path: 'intro',
    component: HeaderOneComponent,
    outlet: 'header'
  },
  {
    path: 'main',
    component: MainComponent
  },
  {
    path: 'main',
    component: HeaderTwoComponent,
    outlet: 'header'
  },
];
//...

Answer 1

我有同样的问题，我想我已经解决了。你会这样做：

//...
const routes: Routes = [
  //...
  {
    path: 'intro',
    children: [
      {
        path: '',
        component: IntroComponent,
      },
      {
        path: '',
        component: HeaderOneComponent,
        outlet: 'header'
      }
    ]
  },
  {
    path: 'main',
    children: [
      {
        path: '',
        component: MainComponent
      },
      {
        path: '',
        component: HeaderTwoComponent,
        outlet: 'header'
      }
    ]
  }
];
//...