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

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>

如果给定的 routerLink 是活动的，则

routerLinkActive 将一个名为“活动”的类应用于 a 元素。

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