Question

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

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

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

这样做的一种方法是创建一个具有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>

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

另一种方法是使用服务来管理它。即拥有一个带有一系列链接的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的孩子，我不知道如何让它发挥作用。

我想知道是否有办法让最后一种方法起作用。如果没有，第二种方法是否是解决这一问题的最实用的解决方案，还是存在更清晰的解决方案？

Answer 1

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

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

基于路径的角度子导航

1 个答案: