Угловой [ngClass] против [класс

Question

В чем разница в Angular между следующими фрагментами:

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

Answer 1

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

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

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

ngClass это нормальная угловая директива, как вы можете построить ее самостоятельно

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

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

Answer 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 вы также можете иметь условные троичные операторы.

Answer 3

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

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

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

пример: https://stackblitz.com/edit/angular-ivy-dr66ww?file=src/app/app.component.html

Answer 4

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

Answer 5

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

Итак, Angular планирует удалить директивы [ngClass] и [ngStyle] в своих будущих выпусках.

На данный момент (Angular-v13) привязка [class] поддерживает добавление нескольких классов css . Хотя есть некоторые пробелы в функциях по сравнению с [ngClass]. Вы можете проверить это - https://github.com/angular/angular/issues/40623

[нгкласс]

      <p [ngClass] = “‘addGreen’”> Hello World </p> 
<p [ngClass] = “[‘addGreen’, ‘addFont’, ‘addBg’]”> Hello World </p>
<p [ngClass] = “{ addGreen: true, addBg: true, addFont: false }”> Hello World </p> 
<p [ngClass] = “{ addGreen addBg: true, addFont: false}”> Hello World </p>

[учебный класс]

      <p [class] = “‘addGreen’”> Hello World </p> 
<p [class] = “[‘addGreen’, ‘addFont’, ‘addBg’]”> Hello World </p>
<p [class] = “{ addGreen: true, addBg: true, addFont: false }”> Hello World </p> 

Примечание. Указанный ниже способ добавления нескольких классов невозможен.

<p [класс] = "{addGreen addBg: true, addFont: false}"> Привет, мир

Answer 6

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

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

Answer 7

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

Например, это не приведет к присвоению значения класса d-flex элементу [class] привязка до тех пор, пока условие, связанное с этим классом, имеет истинное условие

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}"

Answer 8

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