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

在 angular 的培训视频中，我看到了一些代码，如下所示:
<button class="nav nav-primary" [class.active]="isActive">
在组件中，如果我们让变量 isActive=true ，则按钮具有“active”类；如果让变量 isActive=false ，则按钮没有“active”类。

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

最佳答案

这意味着元素的当前 .active 的 class(style) 状态是 run 当 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

关于css - Angular [class.active] ="isActive"- "class.active"在这里是什么意思？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46617318/