В чем разница между ng-классом и ng-стилем?

Question

ng-class а также ng-style оба, похоже, являются методами динамической установки классов CSS. В чем разница между ними?

Answer 1

Стиль ng используется для интерполяции объекта javascript в атрибут style, а не в класс css.

Следующая директива будет переведена в style="color:red"

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

А директива ng-class переводит ваш объект в атрибут класса.

Следующее будет переведено в class="удалено", когда переменная isDeleted имеет значение true.

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

Замечания:

Есть еще один вариант использования для ng-style. Если вы хотите что-то интерполировать в атрибуте style, вам следует рассмотреть возможность использования ng-style. В противном случае это не сработало бы до Internet Explorer 11, как предполагает документация.

Итак, вместо использования стиля:

style="width: {{progress}}"

Используйте стиль нг:

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 может быть любым, что оценивает допустимое значение для атрибута, который вы устанавливаете, например, font-size в приведенном выше примере

• С другой стороны,

  ****... ****

• Где objExp - это объект, содержащий пары ключ-значение ваших атрибутов стиля, например: { width: 40, margin: '2em' } и т. Д.

Answer 4

Теоретически они оба разные, но практически в какой-то момент они оба становятся одинаковыми.

ngStyle используется для динамического добавления стиля во время выполнения и

ngClass используется для динамического добавления некоторого класса во время выполнения, но класс также содержит некоторый контент css, поэтому косвенно вы также добавляете css сюда динамически