Question

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

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

我的主要目标是根据用户所使用的路由来加载不同的标头组件/模块（最好是延迟加载），与主要<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'
      }
    ]
  }
];
//...

没有辅助路线的多角路由器出口

1 个答案: