angular - 当 routerLink 不直接在父元素内部，而是在单独的组件中时，父元素上的 routerLinkActive 不起作用

Question

当 div 中的一条路由处于活动状态时，我想在 div 上设置一个类。当我将带有 routerLink 指令的链接直接放在 div 中时，这与 routerLinkActive 指令一起工作得很好：

<div class="menu" routerLinkActive="active-group">
  <a ngFor="let link of links" [routerLink]="link">{{ link }}</a>
</div>

但是，当我将链接重构为单独的组件时，不再设置“活动组”类：

<div class="menu" routerLinkActive="active-group">
  <app-link *ngFor="let link of links" [link]="link"></app-link>
</div>

我在这里创建了一个 StackBlitz 来演示这个问题：https ://stackblitz.com/edit/routerlinkactive?file=src/app/app.component.ts

任何帮助，将不胜感激！

Answer 1

尝试这个：

  <app-link
    *ngFor="let link of links"
    [link]="link"
    [routerLink]="link"
    routerLinkActive="active"
  ></app-link>