He estado trabajando en una aplicación angular realmente pesada. Estoy ejecutando un proceso de optimización y luego tengo una duda sobre el enlace de clase angular.

Digamos que tenemos elementos padre e hijo , donde hacemos un estilo condicional. De default , el elemento secundario debe ser backgound-color: blue . Pero cuando el padre ha expanded la clase, el niño debe convertirse background-color: red .

NOTA: La clase expanded se aplica en función de una condición.

Podemos hacerlo de 2 métodos.

Método 1

Modelo

 <parent class="parent" [class.expanded]="isExpanded">
 <child class="child"></child>
</parent>

SCSS

 .parent {
 .child {
 background-color: blue;
 }

 &.expanded {
 .child {
 background-color: red;
 }
 }
}

Método 2

Supongamos que tenemos algunas clases comunes globales bg-blue y bg-red .

Modelo

 <parent class="parent" [class.expanded]="isExpanded">
 <child class="bg-blue" [class.bg-red]="isExpanded"></child>
</parent>

En el método anterior, tuvimos que agregar Class Binding adicional al elemento secundario.

La pregunta es,

¿Qué método es eficiente en términos de rendimiento para usar en aplicaciones angulares más grandes con una manipulación DOM mínima?