angular - 无法使用 mat-tab-navbar 中的 routerLinkActive 将选项卡切换到活动状态

Question

我正在使用 mat-tab-navbar 进行带有延迟加载模块的应用程序导航。我尝试使用 RouterLinkActive 但单击时无法将选项卡状态切换为活动状态。请看下面的截图。

navbar.component.html

<nav mat-tab-nav-bar fxHide.xs>
    <a mat-tab-link *ngFor="let link of navLinks" routerLink="{{ link.location }}" routerLinkActive
        #rla="routerLinkActive" [active]="rla.isActive">
        <span>{{ link.label | uppercase }}</span>
    </a>
</nav>

结果截图

标签： angularangular-material

Answer 1

感谢您的回复。我已经想通了，它的工作原理！

navbar.component.html

    <nav mat-tab-nav-bar mat-align-tabs="center">
    <a mat-tab-link *ngFor="let link of navLinks" routerLink="{{ link.location }}"
        (click)="activelink=link.location" [active]="activelink==link.location">
        <span>{{ link.label | uppercase }}</span>
    </a>
</nav>

navbar.component.ts

  activelink = '';