为角度“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>

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

• 我应该routerLinkActive在我的 中定义吗ts？
  
• 这是什么[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]输入将设置链接指向的路由，并且 是routerLinkActive一个指示该路由是否处于活动状态的指令。在这里检查 API： https: //angular.io/api/router/RouterLinkActive

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