Angular 使用模板进行路由

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 时只更改内容，而不必将 sideBar Z 定义到组件中。

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

提前致谢

Answer 1

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

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

在这里，您可以将导航放在导航组件中，它应该完全按照描述工作

Angular 使用模板进行路由

Angular Routing with templating

routes

angular-routing

angular