javascript - selectedIndex 不适用于 mat-tab-nav-bar Angular Material 选项卡

Question

我编写了如下标签代码

<nav mat-tab-nav-bar [selectedIndex]="0">
    <a mat-tab-link 
        *ngFor="let link of navLinks; let i = index;"
        [routerLink]="link.path"
        routerLinkActive #rla="routerLinkActive"
        [active]="rla.isActive">
        <div class="link-tab-label">{{link.label}}</div>
        <mat-icon class="link-tab-close" (click)="closeTab(i)">close</mat-icon>
    </a>
</nav>

当我运行该项目时，我遇到了如下所示的问题

compiler.js:485 Uncaught Error: Template parse errors:
Can't bind to 'selectedIndex' since it isn't a known property of 'nav'. ("
        <mat-card>
          <mat-card-content>
              <nav mat-tab-nav-bar [ERROR ->][selectedIndex]="0">

如何将 selectedIndex 与 mat-tab-nav-bar 一起使用？

Answer 1

mat-tab-nav-bar 没有 selectedIndex 属性，且 内有 mat-tab-link mat-tab-nav-bar 并不是真正的选项卡。 mat-tab-nav-bar “提供类似选项卡的 UI，用于在路线之间导航。”要设置事件“选项卡”或链接，您可以通过应用程序的路由器设置事件路由。 “选项卡”通过 routerLinkActive 指令和 active 属性显示为事件状态。