css - Angular [class.active] ="isActive"- "class.active"在这里是什么意思？

Question

在一个angular的训练视频中，看到了一些代码，如下所示:

<button class="nav nav-primary" [class.active]="isActive">

在组件中，如果我们让变量isActive=true ，则按钮具有“事件”类；如果让变量isActive=false ，则按钮没有“事件”类。

我知道这是一种单向绑定(bind)，但我想知道“class.active”的语法含义是什么？ (“类”有一个属性“活跃”？但这是不可能的。

Answer 1

这意味着 .active当前状态class(style)当 isActive 时运行元素的是真实的。

根据你的代码，

在 .html 文件中，

<button class="nav nav-primary" [class.active]="isActive">

在 .ts 文件中，

public isActive:boolean = true;

我将“isActive”定义为 True(默认)，您可以根据需要进行更改；)

在 .CSS 文件中，

.nav-primary {
              color : "Black";
}

.nav-primary.active {
             color : "white";
}

现在当 isActive 时，您可以看到颜色是白色是True当 isActive 时，颜色为黑色是False