1

下面的网络链接演示了 routerLinkActive id 在用作不同 HTML 元素的布尔值时的工作情况 [ngClass]
https://stackblitz.com/edit/routerlinkactivesimple?file=src%2Fapp%2Fapp.module.ts

相比之下，routerLinkActive id 不适用于 web-link 下面的 @angular/material 实例，但通过注释第 5 行和第 6 行错误消失了，但没有纠正 routerLinkActive id 的可用性： https ://stackblitz.com/edit/mat -routerlinkactive?file=src%2Fapp%2Fnav%2Fnav.component.html

4

2 回答 2

1

您的第二个链接有很多问题，甚至没有使用 app-nav，因此“评论行”不足以使其正常工作..

但不管怎么说

routerLinkActive 没有问题，问题是：

<button mat-button color="white" fxHide.xs *ngIf="true">
  <span>
    <a routerLink="city-list" routerLinkActive="active-link citNgClassList" #rla_clist="routerLinkActive"
      [routerLinkActiveOptions]="{exact: true}">
      <mat-icon class="mr">maps_home_work</mat-icon>
      Cities
    </a>
  </span>
</button>

您的链接在按钮内.. 删除按钮，保留“a”并且它可以工作

*ngIf="true" 有什么意义？

编辑： 如果您想保留按钮样式，您可以保留按钮并删除“a”（但将链接显示为按钮的可用性很差......），只需将 routerLink、routerLinkActive 和 routerLinkActiveOption 直接放在按钮上

于 2021-03-11T08:02:25.700 回答
0

感谢 JiBi 的观察。事实上，剥离链接的材料按钮包装不会再在第二个 StackBlitz 链接第 5 行跨度上产生错误，但它会以一种糟糕的方式伤害整个页面，这会破坏页面的和谐，这并不容易来代替。我删除了一些评论，这些评论保留在原处，以便让我轻松了解我尝试过的内容。按钮的 *ngIf= "true" 应该是 *ngIf= "!rla_clist" 或 *ngIf= "!rla_cform" 所以如果我在链接本身上，链接的按钮发送者将不会显示，.. ...但这是另一个问题，我正在等待更好的解决方案。

于 2021-03-11T17:53:54.327 回答