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

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

为角度`mat-tab-nav-bar`

1 个答案: