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

【问题标题】：Set class on an element in a parent component在父组件中的元素上设置类
【发布时间】：2018-08-17 22:54:56
【问题描述】：

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

【问题讨论】：

标签： angular typescript ui-sref

【解决方案1】：

可以通过多种方式跟踪您的导航堆栈。

一种方法是创建服务并在那里跟踪您的导航。因此，如果您要从侧边栏中选择一个项目，其活动状态将取决于服务，面包屑也是如此。
另一种方式（也是 IMO 更好的方式）是依赖 Angular 路由。这意味着您的导航基于 Angular 的路由器。

<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 会将名为 'active' 的类应用于 a 元素。

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

【讨论】：