angular - 为 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 的指令, 并且还设计了按钮的样式，但它需要一个输入( bool 值)将其设置为事件或非事件，因此 [active]输入。此处的文档: https://material.angular.io/components/tabs/examples

现在您需要知道如何将其标记为事件状态，所以 [routerLink]输入将设置链接指向的路线，routerLinkActive是一个指示该路由是否处于事件状态的指令。在此处检查 API: https://angular.io/api/router/RouterLinkActive

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