时间戳

首页 > 解决方案 > 基于路由的 Angular 子导航

html - 基于路由的 Angular 子导航

问题描述

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

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

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

一种方法是创建一个 subnav 组件，该组件具有 switch 语句并根据路由呈现正确的 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>

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

另一种方法是使用服务来管理它。即有一个 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>

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

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

标签： htmlangularangular-ui-router

解决方案

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

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

推荐阅读