带模板的角路由

Question

想象一下这个场景，你有一个 Angular 应用（版本 11），其中 app.component 调用了一个功能模块

app.component.html

<div class="content" fxFlex>
  <router-outlet></router-outlet>
</div>

在我的功能模块中，我将一个页面垂直分成两部分（带有侧边栏）。

Component A Module X

| sideBar Z  | content A |

Component B Module X

| sideBar Z | content B|

当我从 A 导航到 B 时，我的想法是只更改内容，而不必将侧边栏 Z 定义到组件中。

我认为我需要在路由中定义一些模板。我怎样才能实现这种行为（我在文档中没有找到）？

提前致谢

Answer 1

尝试在导航路线中包装需要侧边栏的路线

routes = [
...
{path: 'no-navigation-route', component: DComponent},
{
  path: '',
  component: NavigationComponent,
  children: [
     {path: 'path-a', component: ContentAComponent},
     {path: 'path-b', component: ContentBComponent}
  ],
}
]

在这里，您可以将导航放在 NavigationComponent 中，它应该完全按照描述的方式工作