为 angular `mat-tab-nav-bar` 设置活动标签

Question

我有以下 not working 代码（在一些不完整的示例中找到）：

<nav mat-tab-nav-bar>
    <a mat-tab-link *ngFor="let device of devices$ | async" [routerLink]="device.getIp()"
        [routerLinkActive #rla="routerLinkActive"
        [active]="rla.isActive">
    </a>
</nav>
<router-outlet></router-outlet>

我不确定这应该如何工作：

我应该在我的 ts 中定义 routerLinkActive 吗？
[routerLinkActive #rla="routerLinkActive" 是什么意思？

Answer 1

把routerLinkActive前面的[去掉，不知道是不是打错了，不过没必要。我试着给它一个更合乎逻辑的顺序。

<nav mat-tab-nav-bar>
  <a *ngFor="let device of devices$ | async" 
     [routerLink]="device.getIp()"
     routerLinkActive
     #rla="routerLinkActive"
     mat-tab-link
     [active]="rla.isActive">
  </a>
</nav>
<router-outlet></router-outlet>

该代码应该是正确的。那里发生了一些事情。所以每个 <a> 标签都有 mat-tab-link 指令将它连接到 mat-tab-nav-bar，并且还设置了按钮样式，但它需要一个输入（布尔值）来将其设置为活动或非活动，因此 [active] 输入。此处的文档： https://material.angular.io/components/tabs/examples

现在你需要知道如何将其标记为活动，所以 [routerLink] 输入将设置 link 指向的路线，而 routerLinkActive 是一个指令，它将告诉该路由是否处于活动状态。在此处检查 API： https://angular.io/api/router/RouterLinkActive

所以您在代码中所做的是，您将 routerLinkActive 指令实例分配给名为 rla 的变量，并使用此 #rla="routerLinkActive"，然后您可以访问 isActive 属性，因此您将 mat-tab-link 的输入 [active] 设置为带有 [active]="rla.isActive" 的 rla 指令实例中的属性。无需处理 ts 文件中的任何内容。

为 angular `mat-tab-nav-bar` 设置活动标签

Set active tab for angular `mat-tab-nav-bar`

angular

angular2-routing

mat-tab