Css 角度2-什么'；s相当于routerLinkActive="；主动的；在TypeScript（.ts）文件中？

我在html文件中使用

routerLinkActive=“active”

和

routerLink=[myId]

突出显示ul中的活动锚点

例如：

<a [routerLink]="[myId]" class="list-group-item clearfix" routerLinkActive="active">
  <div class="pull-left">
    <h4 class="list-group-item-heading">{{someName}}</h4>
  </div>
</a>

<a (click)="onClick(myId)" class="list-group-item clearfix" routerLinkActive="active">
  <div class="pull-left">
    <h4 class="list-group-item-heading">{{someName}}</h4>
  </div>
</a>

使用

routerLink=[myId]

检查锚元素时，样式设置为：

.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
    z-index: 2;
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
}

---

是否可以在

onClick（）

函数的.ts文件中设置活动锚样式？或者有更简单的方法吗？

突出显示导航中的特定链接是应用程序当前状态的反映：链接a突出显示是因为用户正在查看页面a

您正在询问如何在单击后突出显示链接。这种方法不太理想：在新路线/页面实际激活之前，您可能会突出显示链接。最重要的是，如果用户重新加载页面或直接导航到该页面，因为他们将其添加为书签，则该链接将永远不会突出显示（因为没有人单击它）

您需要找到一种方法，根据应用程序状态来突出显示链接，而不是作为操作的结果（典型的流程是：操作=>更改状态=>更新UI）

也许是这样的：

@组件({
模板：`
HomeComponent
`
})
导出类HomeComponent{
currentPath=''；
构造函数（路由：ActivatedRoute）{
//检索当前路径。
this.currentPath=snapshot.url.join（“”）；
}
}

其思想是检索当前路径并将其公开给模板

---

正如Günter所建议的，您可能可以在

routerLinkActive

的源代码中找到更健壮的代码来测试当前路径。

您可以使用

routerLinkActive

类中的代码，并根据您的需要对其进行定制