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}
  ],
}
]

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

带模板的角度路由

1 个答案: