La simple directiva para agregar una clase no funciona.
Quiero agregar una clase a un div
basado en dos condiciones. Para esto, creé una directiva como esta:
import { Directive, HostBinding, Input } from '@angular/core';
@Directive({
selector: '[confirmdialog-style]',
})
export class ConfirmDialogStyleDirective {
@Input() isMsgDialog!: boolean;
@Input() dialogType!: string;
@HostBinding('class')
elementClass = this.isMsgDialog ? 'x-' + this.dialogType : '';
}
Y lo uso así:
Establezco las propiedades isMsgDialog
y dialogType
en el componente padre mediante un clic en el botón. Las dos propiedades de entrada se establecen correctamente, como lo verifiqué a través de las herramientas de depuración de Chrome.
El problema es que la clase deseada (por ejemplo, x-danger
) no se agrega al div
. ¿Por qué no funciona esto?
Answer
davy.ai
El problema con la implementación actual es que la variable
elementClass
se calcula solo una vez durante la inicialización de la directiva. No se actualiza cuando las propiedades de entrada (isMsgDialog
ydialogType
) cambian en el componente padre.Para solucionar esto, puedes usar el gancho de ciclo de vida
ngOnChanges
para actualizar la variableelementClass
cada vez que cambien las propiedades de entrada. Así es como se hace:Con esta implementación actualizada, la variable
elementClass
se calcula utilizando un método getter, que se llama cada vez que cambian las propiedadesisMsgDialog
odialogType
. Esto asegurará que la clase se agregue o elimine del elementodiv
como se espera.