Разница между связыванием [ngClass] и [class]

Ответ 1

Это специальный синтаксис привязки Angular

<div [class.extra-sparkle]="isDelightful">

Это часть компилятора Angular, и вы не можете создать альтернативный вариант привязки после этого стиля привязки. Поддерживаются только [class.xxx]="...", [style.xxx]="..." и [attr.xxx]="..."

ngClass - нормальная директива Angular, как вы можете ее самостоятельно создать

<div [ngClass]="{'extra-sparkle': isDelightful}">

ngClass более мощный. Он позволяет связывать строку классов, массив строк или объект, как в вашем примере.

Ответ 2

Вышеприведенные две строки кода относятся к привязке CSS-класса в Angular. Существует в основном 2-3 способа привязки класса css к угловым компонентам.

Вы задаете имя класса с именем class.className в скобках в шаблонах, а затем выражение справа, которое должно принимать значение true или false, чтобы определить, следует ли применять класс. Это нижеприведенное выражение, где extra-sparkle (key) класс css и isDelightful (значение).

<div [class.extra-sparkle]="isDelightful">

Когда несколько классов потенциально могут быть добавлены, директива NgClass оказывается очень полезной. NgClass должен получить объект с именами классов в качестве ключей и выражений, которые оцениваются как true или false. Ключ -extra-sparkle - это значение, а isDelightful - значение (логическое значение).

<div [ngClass]="{'extra-sparkle': isDelightful}">

Теперь, наряду с дополнительным блеском, вы также можете блестеть своим div.

<div [ngClass]="{'extra-sparkle': isDelightful,'extra-glitter':isGlitter}">

или же

export class AppComponent {
    isDelightful: boolean = true;
    isGlitter:  boolean = true;

     sparkleGlitter()
    {
        let classes = {
            extra-sparkle: this.isDelightful,
            extra-glitter: this.isGlitter
        };
        return classes;
    }
}

<div [ngClass]='sparkleGlitter()'>

Для ngClass вы также можете иметь условные троичные операторы.

Ответ 3

Используя [ngClass], вы можете применить несколько классов по-настоящему удобным способом. Вы даже можете применить функцию, которая вернет объект классов. [class. позволяет вам применять только один класс (конечно, вы можете использовать класс несколько раз, но это выглядит очень плохо).

Ответ 4

В [ngClass] вы можете добавить один из двух разных классов:

<div [ngClass]="a === b ? 'class1' : 'class2'">