Angular 9中[ngClass]/[class]和[className]有什么区别？

Question

有许多关于ngClass和class之间差异的SO问题，例如：Difference between [ngClass] vs [class] binding

但你也可以使用[className]作为一种绑定方式。那么，[ngClass]和[className]之间有什么区别？在何时应该使用它们中的一个？

- Maurice

---

一般情况下，绑定到className是否有任何作用（即在组件没有明确提供的情况下）？我一直使用class。 - jonrsharpe

@jonrsharpe 是的，它的行为与绑定到ngClass完全相同。因此，我真的很想知道具体的区别是什么。 - Maurice

啊 - "在Angular中，有几个常见属性会自动映射到属性。这些包括class/className..." - 鉴于这是唯一的参考资料，我建议遵循文档。如果它的行为方式相同，那么你认为有什么区别呢？ - jonrsharpe

@jonrsharpe 那是什么意思？className 只不过是 ngClass 的同义词吗？ - Maurice

Answer 1

与[className]类似，[ngClass]允许绑定一个由空格分隔的类名字符串表达式：

<some-element [ngClass]="'first second'">...</some-element>
<some-element [className]="'first second'">...</some-element>

但是[ngClass]也允许将类名绑定成数组或对象（其中每个属性键都是应用或不应用的类名）：

<some-element [ngClass]="['first', 'second']">...</some-element>
<some-element [ngClass]="{'first': condition1, 'second': condition2}">...</some-element>

这些语法可能很方便，但由于 className 是 HTML 元素的字符串属性，所以不受 [className] 支持。

请查看此 stackblitz 进行演示。

- ConnorsFan

---

这仅适用于ViewEngine。在Angular Ivy中，这两种方法是相同的。https://stackblitz.com/edit/ngclass-class-ivy?file=src/app/app.component.html - Chau Tran

Answer 2

正如@chau-tran所说，它们几乎是相同的。即使在Ivy中，我也发现[ngClass]比普通的[class]绑定更强大。

您无法像这样使用[class]绑定绑定多个类：

<div [class]="{'class1 class2': true}"></div>

在这种情况下，您将收到以下错误：

Error: Failed to execute 'add' on 'DOMTokenList': The token provided ('class1 class2') contains HTML space characters, which are not valid in tokens.

但是使用[ngClass]完全有效：

<div [ngClass]="{'class1 class2': true}"></div>

https://stackblitz.com/edit/ngclass-class-ivy-qcg3ta?file=src/app/app.component.html

- Aleksandr Cherepanov