1

我有以下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"意思？
4

1 回答 1

2

去掉[前面的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]input 将设置链接指向的路由，并且routerLinkActive是一个指令，将告知该路由是否处于活动状态。在此处检查 API： https ://angular.io/api/router/RouterLinkActive

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

于 2019-11-21T19:44:15.050 回答