почему ngClass не является стандартной привязкой свойств

Question

Я новичок в Angular, просто вопрос о разнице встроенных директив и привязки свойств, ниже приведен код, который я видел:

// ... just js expression, not relevant here
<div [ngClass]="'text-white' + ...">
 Hello, World.
</div>
<div class="form-group m-2">
 <label>Name:</label>
 <input class="form-control" [value]=... />
</div>

, так почему мы не можем сделать ngClass aпривязка стандартного свойства, такая же как [value] как:

<div [class]="'text-white' + ...">

почему это должна быть директива?

Answer 1

Можно использовать [class] напрямую. Можно даже комбинировать с ngClass, как показано ниже:

В app.component.ts

isActive = true;
componentClass = 'my-class';

В app.component.html

<div [class]="componentClass" [ngClass]="{ active: isActive }">hello</div>

Если вы проверите свой HTML, вы увидите такой результат:

<div _ngcontent-gej-c0="" class="my-class active">div</div>

Но я бы не рекомендовал его. Когда вы будете создавать повторно используемые компоненты, лучше предоставьте атрибут класса для конечного разработчика.

Answer 2

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

ngclass="text-white"

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

Component.ts

 myclass: string = 'text-white';

Component.html

[ngclass]="myclass"

Вы также можете передать объект, в котором каждый проект является именем класса CSS, и будет использоваться значение true или false, true, указывающее, что класс будет false, что не будет.

[ngClass]="{'row': true, 'container': false}"

Ничто не мешает вам строить это динамически.

Component.ts

getClassses(): any {
 return {'row': true, 'container': false}
}

Component.html

[ngClass]="getClasses()"