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

Question

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

Answer 1

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

以下指令将被翻译成style="color:red"

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

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

当 isDeleted 变量为 true 时，以下将被转换为 class="deleted"。

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

注意：

ng-style 还有一个用例。如果你想在 style 属性中插入一些东西，你应该考虑使用 ng-style。否则，正如documentation 所建议的那样，在 Internet Explorer 11 之前这将不起作用。

所以，不要使用样式：

style="width: {{progress}}"

使用 ng 样式：

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 是在某处定义的由样式组成的类：

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

Answer 3

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

1. 这些是使用 ngClass 的不同方式

   ...

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

   元素>

   <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 是一个包含样式属性的键值对的对象 例如{宽度：40，边距：'2em'}等

Answer 4

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

ngStyle 用于在运行时动态添加样式和

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