javascript - 访问组件类中的 [routerLinkActive] 值

我有一个选项卡组件 TabComponent ，它具有以下 HTML 模板:

<a [routerLink]='link' [routerLinkActive]="[is-active]">link label</a>
<button>Close tab</button>

我想访问 [routerLinkActive] 属性的值，基本上我想在组件类中获取一个变量，指示此 routerLink 是否处于事件状态。如何从组件类中访问它？

编辑 :我想如果我可以访问 <a> 链接标签的 CSS 类，工作就完成了，有没有办法访问它？

最佳答案

我不知道这是否有帮助，但是，您可以像这样在模板中获取值:

<a *ngFor="let child of directory; let i = index;"
   routerLink="{{child.route}}"
   routerLinkActive #rla="routerLinkActive">

   <h3>{{rla.isActive}}</h3><!--Displays boolean indicating whether or not you are navigated to this link-->
</a>

现在，一个 bool 值将显示在您的 h3 中，指示您当前是否导航到该链接。

虽然这作为模板变量工作，但我无法将该值传递给 component.ts 或将其传递给其他模板指令，例如

 <a *ngFor="let child of directory; let i = index;"
   routerLink="{{child.route}}"
   routerLinkActive #rla="routerLinkActive"

   [active]="rla.isActive" <!--This doesn't insert the boolean here for some reason-->
   >
   <h3>{{rla.isActive}}</h3>
</a>

我希望这有帮助。如果您更接近一个好的解决方案，请更新。