javascript - multiple - ng-class

Angular[ngClass] vs[class

Question

¿Cuál es la diferencia en Angular entre los siguientes fragmentos de código:

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

Answer 1

En [ngClass] puedes agregar una de dos clases diferentes como esta:

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

Answer 2

Esta es una sintaxis especial de unión angular.

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

Esto es parte del compilador Angular y no puede crear una variante de enlace personalizada siguiendo este estilo de enlace. Los únicos admitidos son [class.xxx]="..." , [style.xxx]="..." , y [attr.xxx]="..."

ngClass es una directiva angular normal como usted puede construirla usted mismo

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

ngClass es más potente. Te permite enlazar una cadena de clases, una matriz de cadenas o un objeto como en tu ejemplo.

Answer 3

Las dos líneas de código anteriores se relacionan con el enlace de clase CSS en Angular. Existen básicamente 2 o 3 formas en que puede enlazar la clase css a los componentes angulares.

Proporciona un nombre de clase con class.className entre corchetes en sus plantillas y luego una expresión a la derecha que debe evaluar como verdadera o falsa para determinar si se debe aplicar la clase. Esta es la siguiente: la clase css y isDelightful (valor).

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

Cuando potencialmente se deben agregar varias clases , la directiva NgClass es realmente útil. NgClass debería recibir un objeto con nombres de clase como claves y expresiones que se evalúan como verdadero o falso. La clave es chispa y chispa, y el valor (booleano) es Débil.

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

Ahora, junto con el brillo adicional, también puede brillar su div.

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

o

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()''>

Para ngClass, también puede tener operadores ternarios condicionales.

Answer 4

Usando [ngClass] puedes aplicar múltiples clases de una manera realmente conveniente. Incluso puede aplicar una función que devolverá un objeto de clases. [class. te permite aplicar solo una clase (por supuesto, puedes usar la clase unas cuantas veces pero se ve muy mal).