与[ngClass]耦合的routerLinkActive id

Question

下面的web链接演示了当用作不同的routerLinkActive元素的ngClass的布尔值时，HTML的工作情况

https://stackblitz.com/edit/routerlinkactivesimple?file=src%2Fapp%2Fapp.module.ts

相比之下，routerLinkActive id不能与web链接下面的@angular/material实例一起使用，但通过注释第5行和第6行来消除错误，但是没有纠正routerLinkActive id：https://stackblitz.com/edit/mat-routerlinkactive?file=src%2Fapp%2Fnav%2Fnav.component.html的可用性

Answer 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=“真”的意义是什么呢？

编辑:你可以保留按钮并去掉'a‘如果你想保持按钮的风格(但是把链接显示为按钮是不好用的)，直接在按钮上放上routerLink，routerLinkActive & routerLinkActiveOption就行了

Answer 2

谢谢，JiBi，谢谢你的观察。事实上，剥离链接的材料按钮包装不再在第二个StackBlitz链接行5跨度上产生错误，但它以一种糟糕的方式损害了整个页面的样式，破坏了不易替换的页面的协调性。我已经删除了一些评论，这些评论留在原地，让人们对我尝试过的内容有一个简单的了解。按钮的*ngIf= "true“应该是*ngIf= "!rla_clist”或*ngIf= "!rla_cform“，所以如果我在链接本身，链接的按钮发送者将不会显示，.....but这是我正在等待的另一个问题的更好的解决方案。