Разница между привязкой [ngClass] и [class]

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

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

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

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

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

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

Две приведенные выше строки кода относятся к CSS class привязке в Angular. В основном есть 2-3 способа привязать класс css к компонентам angular.

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

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

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

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

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

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

or

export class AppComponent {
    isDelightful: boolean = true;
    isGlitter:  boolean = true;
    
    get sparkleGlitter()
    {
        let classes = {
            extra-sparkle: this.isDelightful,
            extra-glitter: this.isGlitter
        };
        return classes;
    }
}

<div [ngClass]='sparkleGlitter'>

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

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

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

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

В текущей версии Angular также работает следующий синтаксис:

[class]="{toggled: sidebarActive, test: true,test1: sidebarActive}

Итак, насколько я понимаю, нет разницы между использованием ngClass и [class] привязки?

Пример

Да, с помощью привязки классов ([class]) мы также можем присоединить несколько классов css с последними версиями. пример: [class] = '{объект с ключом в качестве имени класса и значением как true / false}' то же, что и [ngClass], поэтому ... нет никакой разницы между привязкой [class] и встроенной директивой [ngClass]

Никто не упомянул, что при использовании привязок [class] и [ngClass] может возникнуть некоторая путаница, если вы попытаетесь передать некоторую строку класса в [class], которая «зарегистрирована» [ngClass]. Они могут соревноваться.

Например. это не будет назначать значение класса 'd-flex' привязке [class], пока условие [ngClass], которое связано с этим классом, имеет истинное условие

component.html

<div [ngClass]="{'d-flex': falseCondition}" [class]="getClassBasedOnCondition()">

component.ts

public getClassBasedOnCondition(): string {
    return trueCondition ? 'd-flex' : '';
}

Вы можете использовать [class.] вместо [ngClass], чтобы избежать такого поведения, пока у вас нет сплава класса, например [ngClass]="{'d-flex p-1': condition}"