有许多关于ngClass和class之间差异的SO问题,例如:Difference between [ngClass] vs [class] binding
但你也可以使用[className]
作为一种绑定方式。那么,[ngClass]
和[className]
之间有什么区别?在何时应该使用它们中的一个?
有许多关于ngClass和class之间差异的SO问题,例如:Difference between [ngClass] vs [class] binding
但你也可以使用[className]
作为一种绑定方式。那么,[ngClass]
和[className]
之间有什么区别?在何时应该使用它们中的一个?
与[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 进行演示。
正如@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
className
只不过是ngClass
的同义词吗? - Maurice