es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

La simple directiva para agregar una clase no funciona.

04 Aug, 2023 Programación

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?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    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 y dialogType) cambian en el componente padre.

    Para solucionar esto, puedes usar el gancho de ciclo de vida ngOnChanges para actualizar la variable elementClass cada vez que cambien las propiedades de entrada. Así es como se hace:

    import { Directive, HostBinding, Input, OnChanges, SimpleChanges } from '@angular/core';

@Directive({
  selector: '[confirmdialog-style]',
})
export class ConfirmDialogStyleDirective implements OnChanges {
  @Input() isMsgDialog!: boolean;
  @Input() dialogType!: string;

  @HostBinding('class')
  get elementClass() {
    return this.isMsgDialog ? 'x-' + this.dialogType : '';
  }

  ngOnChanges(changes: SimpleChanges) {
    if (changes.isMsgDialog || changes.dialogType) {
      this.elementClass;
    }
  }
}

    Con esta implementación actualizada, la variable elementClass se calcula utilizando un método getter, que se llama cada vez que cambian las propiedades isMsgDialog o dialogType. Esto asegurará que la clase se agregue o elimine del elemento div como se espera.

Comments are closed.