为什么 <a mat-tab-link > 中的 [active] 在 Angular 中不起作用？

Question

    <div class="d-flex d-column themed-tab-nav">
            <nav mat-tab-nav-bar color="primary" [tabPanel]="tabPanel" mat-stretch-tabs="false" mat-align-tabs="start">
              <a mat-tab-link  *ngFor="let link of navLinks" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">{{ link.label | translate }}</a>
            </nav>
            <mat-tab-nav-panel #tabPanel>
                <router-outlet ></router-outlet>
            </mat-tab-nav-panel>
        </div>

我使用 Angular Material，但 [active] 不起作用。为什么？

Answer 1

看起来您正在尝试使用

[active]

绑定来管理选项卡链接的活动状态。需要注意的一件事是

[active]

绑定不是

a

元素的标准 Angular 指令或属性。

在 Angular 中，当使用

router

链接并管理活动状态时，

routerLinkActive

指令是标准方法。当关联的路由处于活动状态时，它会自动添加或删除 CSS 类。

<a mat-tab-link *ngFor="let link of navLinks" [routerLink]="link.path" routerLinkActive="active-link">
  {{ link.label | translate }}
</a>