Html 基于路径的角度子导航

我正在构建一个有两级导航的角度应用程序

顶级导航在应用程序中的所有路由上都可见，但第二级导航是特定于上下文的，仅存在于某些路由上

例如，在大学webapp中查看特定课程时，第二级导航可能有到描述、先决条件、不同科目等的链接

一种方法是创建具有switch语句的subnav组件，并根据路由呈现正确的subnav组件：

<div [ngSwitch]="currentRoute">
  <course-sub-nav *ngSwitchCase="course"></course-sub-nav>
  <students-sub-nav *ngSwitchCase="students">...</students-sub-nav>
  <support-sub-nav *ngSwitchCase="support">...</support-sub-nave>
</div>

我最喜欢这种方法，因为如果存在subnav组件，则会渲染subnav，如果不存在，则不会显示任何内容。此外，相关组件可以完全控制在subnav中渲染链接。然而，考虑到

课程页面

实际上不是

标题

的子项，我不确定如何才能使其正常工作

---

我想知道是否有办法让最后一种方法发挥作用。如果不是，第二种方法是解决这个问题的最实际的方法，还是存在一种更干净的方法？

最干净的方法是您提到的第二种方法

拥有一个处理菜单组件的服务将订阅并侦听更改，同时其他组件将处理菜单中需要的项目

<!-- In header.component.html -->
<div class="sub-nav">
  <ng-content="subnav"></ng-content>
</div>

<!-- IN course-page.component.html -->
<div>
  <subnav>
    <!-- my nav links -->
  </subnav>

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