Angular：是否可以将布尔值绑定到CSS类的存在？

Question

我可以使用ngClass根据布尔值应用CSS类。但是，我可以相反吗？是否可以根据CSS类的存在来更改布尔值？环顾四周，我找不到在Angular模板中实现此目的的方法。

对于上下文，如果链接处于活动状态，我正在使用routerLinkActive应用一个类。如果链接处于活动状态，我实际上要做的是设置一个布尔值。

Answer 1

routerLinkActive指令实际上具有您可以使用的isActive属性。

例如，如果我们具有以下链接：

<a routerLink="/one" routerLinkActive="active" #one="routerLinkActive">One</a>

<a routerLink="/two" routerLinkActive="active" #two="routerLinkActive">Two</a>

在这里，我已经使用routerLinkActive语法在每个指向其#name="routerLinkActive"指令的链接上添加了引用。这样，我们现在可以像这样引用isActive属性：

<span *ngIf="one.isActive">ONE IS ACTIVE</span>
<span *ngIf="two.isActive">TWO IS ACTIVE</span>

这里是用来将布尔值传递给*ngIf的，但是您可以在想要访问该布尔值属性的任何地方使用它。

Here is a Stackblitz demo