Question

ng-class和ng-style似乎都是动态设置CSS类的方法。他们之间有什么区别？

Answer 1

ng-style用于将javascript对象插入样式属性，而不是css类。

以下指令将被翻译为 style =“color：red”

ng-style="{color: 'red'}"

并且ng-class指令会将您的对象转换为类属性。

当 isDeleted 变量 true 时，以下内容将被翻译为 class =“deleted”。

ng-class="{'deleted': isDeleted}"

注意：

还有一个用于ng-style的用例。如果要在样式属性中插入某些内容，则应考虑使用ng-style。否则，在documentation建议的Internet Explorer 11之前，这将不起作用。

所以，而不是使用样式：

style="width: {{progress}}"

使用ng-style：

ng-style="{'width':progress}"

Answer 2

在ng-class中，您正在加载某些地方定义的CSS类，例如Bootstrap。在ng-style中，您要设置您希望该元素具有的CSS样式，例如：

ng-style="{ 'background-color': person.email == selectedPerson.email ? 'lightgray' : ' '}" //background-color is a style

has-error是在某个地方定义的类，由style（s）组成：

ng-class="{ 'has-error’: !theForm.email.$valid, 'has-success':theForm.email.$valid}

Answer 3

摘自官方文档：https://angular.io/api/common/NgClass

这些是使用ngClass的不同方式

...

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

<some-element [ngClass]="{'first': true, 'second': true, 'third': false}">...</some-

element>

<some-element [ngClass]="stringExp|arrayExp|objExp">...</some-element>

<some-element [ngClass]="{'class1 class2 class3' : true}">...</some-element>

2。与ngStyle类似，您可以执行以下操作：

**< some-element [ngStyle]="{'font-style': styleExp}">...</some-element>**

您的styleExp可以是可以为您所设置的属性得出合法值的任何值，例如上例中的字体大小
或者，

**** ... ****
其中objExp是一个对象，其中包含样式属性的键值对例如{width：40，margin：'2em'}等。

Answer 4

理论上它们都是不同的，但实际上在某些时候它们都相同

ngStyle 用于在运行时动态添加样式，并且

ngClass 用于在运行时动态添加一些类，但是该类还包含一些CSS内容，因此间接地，您也在此处动态添加CSS

ng-class和ng-style有什么区别？

4 个答案:

注意：