html - 基于路由的 Angular 子导航

Question

我正在构建一个在 header 中具有两级导航的 Angular 应用程序。

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

例如，在大学网络应用程序中查看特定类(class)时，二级导航可能包含指向描述、先决条件、不同主题等的链接。

一种方法是创建一个子导航组件，它有一个 switch 语句并根据路线呈现正确的子导航组件:

<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>

我不喜欢这个解决方案，因为现在子导航组件对所有不同的特定上下文子导航了解得太多了。

另一种方法是使用服务来管理它。即有一个 SubNavService.setNavigationLinks(links: NavLink[]) 接受一组链接。子导航组件然后可以监听对 SubNavService 的更改并动态呈现子链接列表。

这个解决方案有点简洁，但它确实意味着我需要在所有顶级组件上调用该服务以确保子导航正在更新。我还需要清除不需要子导航的页面上的链接。

第三种解决方案可能是做类似的事情:

<!-- 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>

我最喜欢这种方法，因为如果存在子导航组件，则将呈现子导航，如果不存在，则什么也不会显示。此外，相关组件可以完全控制在子导航中呈现链接。然而鉴于 course-page 实际上不是 header 的子级，我不确定如何让它工作。

我想知道是否有任何方法可以使最后一种方法起作用。如果不是，第二种方法是否是解决此问题的最实用的解决方案，或者是否存在更简洁的解决方案？

Answer 1

最干净的解决方案是您提到的第二种解决方案。

拥有处理菜单的服务 - 菜单组件将订阅并监听更改，同时其他组件将处理他们需要在菜单中包含的项目。