如何找到所选元素 routerLinkActive 的父级？

Question

有个link:

<li>
 <ul>
    <a [routerLink]="menu.getRouteUrl(item)" routerLinkActive="active">Link</a>
 </ul>
</li>

如何在 routerLinkActive="active" 时为父 li 设置 class？

Answer 1

可以使用isActive 属性 of routerLinkActive指令，如下；

<li [ngClass]="{'classNameWhenLinkActive': myLink.isActive}">
 <ul>
    <a #myLink="routerLinkActive" [routerLink]="menu.getRouteUrl(item)" routerLinkActive="active">Link</a>
 </ul>
</li>

这里有一个简单的演示https://stackblitz.com/edit/angular-upqogp

Answer 2

您只需将 routerLinkActive 移动到父元素即可。

<li routerLinkActive="active">
  <a [routerLink]="menu.getRouteUrl(item)">Link</a>
</li>