在角度，我看到这样的代码：[class.active] =“isActive”，这里“class.active”的含义是什么？

Question

在角度训练视频中，我看到了一些代码，如下所示：

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

并且在组件中，如果我们让变量isActive=true，则按钮具有“active”类;如果让变量isActive=false，则按钮不具有“active”类。

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

Answer 1

这意味着当.active为 true 时，元素的当前class(style)的{​​{1}}状态处于运行状态。

根据您的代码，

在.html文件中，

isActive

在.ts文件中，

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

我将'isActive'定义为True（默认），您可以根据需要进行更改;）

在.CSS文件中，

public isActive:boolean = true;

现在，当.nav-primary { color : "Black"; } .nav-primary.active { color : "white"; } 为isActive时，您可以看到颜色为白色，而当True为{时，您可以看到颜色为黑色。 {1}}

Answer 2

这意味着您要将class的名称active（class.active）设置为该元素，如果是expression，在这种情况下为isActive属性是true或可以解析为true。

不要将其视为active的财产class。它只是一个由Angular评估的构造，用于获取类的名称。

来自Documentation

  

您可以绑定到特定的类名。 Angular在添加类时   模板表达式评估为真实。它删除了类   表达是虚假的。