在父组件中的元素上设置类

Question

我们在应用程序的根目录中有一个侧边栏。 边栏是一个列表，单击后，我们使用uiSrefActive在列表项上添加active类。 但是，当您从该组件中移出某个位置时，原始列表项将丢失该类。 我想做的是，当您从第一个加载的组件导航到另一个组件（结构上是前一个组件的子组件，因此是活动信号）时，为list元素提供active类。 在页面顶部，我们还有一个面包屑组件，其中第一个父对象始终是其列表项应处于活动状态的组件。 有没有办法做到这一点？

Answer 1

跟踪导航堆栈可以通过两种方法完成。

1. 一种方法是创建服务并在那里跟踪您的导航。 因此，如果您要从侧边栏中选择一项，则其活动状态将取决于服务，而面包屑也将取决于服务。

2. 另一种方式（也是更好的IMO）将依赖​​于Angular路由。 这意味着您的导航基于Angular的Router。

<h1>Angular Router</h1>
  <nav>
    <a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>
    <a routerLink="/heroes" routerLinkActive="active">Heroes</a>
  </nav>
<router-outlet></router-outlet>

routerLinkActive将采用所谓的“主动”类的一个元素，如果给定routerLink处于活动状态。

您还可以使用ActivatedRoute提供程序以编程方式从控制器获取活动链接。