Angular sub-navigation 基于路线

Question

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

top-level 导航在应用程序的所有路线上都可见，但是 second-level 导航是 context-specific 并且仅存在于某些路线上。

例如，在大学网络应用程序中查看特定课程时，second-level 导航可能包含指向描述、先决条件、不同科目等的链接。

一种方法是创建一个子导航组件，该组件具有 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>

我不喜欢那个解决方案，因为现在 sub-nav 组件对所有不同的 context-specific sub-nav 了解得太多了。

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

这个解决方案有点简洁，但它确实意味着我需要在每个 top-level 组件上调用该服务以确保 sub-nav 正在更新。我还需要清除不需要 sub-navs.

的页面上的链接

第三种解决方案可能是这样做的：

<!-- 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 的 child，我不确定如何让它工作。

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

Answer 1

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

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

Angular sub-navigation 基于路线

Angular sub-navigation based on route

html

angular

angular-ui-router