Question

我有一个标签组件TabComponent，其中包含以下HTML模板：

.clone()

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

编辑：我想如果我可以访问<a [routerLink]='link' [routerLinkActive]="[is-active]">link label</a> <button>Close tab</button>链接标记的CSS类，那么工作是否完成，是否有办法访问它？

Answer 1

我不知道这是否会有所帮助，但您可以在模板中获取这样的值：

<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>

现在，您的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>

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

Answer 2

作为 Nayfin 答案的扩展，这也有效（在 Angular 11 中测试）。

这是使用模板变量来设置属性，而不是作为 ngFor 的一部分。您必须为每个组件使用不同的模板变量。

isOpen

Answer 3

您可以使用@ViewChild()装饰器访问routerLinkActive

@ViewChild(RouterLinkActive) private routerLinkActive: RouterLinkActive;

但是这里的问题是它的值没有立即设置，因此对于大多数情况，在组件渲染isActive期间将为false，只有稍后Router会将其设置为true。

访问组件类中的[routerLinkActive]值

3 个答案: