Tengo un componente A, que tiene la directiva personalizada en la página:

Vista:

<warning [details]='details'></warning>

Componente:

    export class AComponent implements OnInit {
      details: ConfirmDetails = {
        header_class: ""   
      };
      languageChanged(newLang: string) {
        this.currentLanguage = newLang;
        this.ngOnInit();
      }
     ngOnInit() {
       if (this.currentLanguage === "English"){
          this.details.header_class = "line1 font50";
       }
       else{
         this.details.header_class = "line2 font90";
       }
    }

Una vez llamado languageChanged(), la directiva no se está actualizando.

    export class WarningComponent implements OnInit {
      @Input() details: ConfirmDetails;

      ngOnInit() {
           console.log(this.details.header_class);
       }
    }

Así que en la primera página cargando la entrada details es "line1 font50", pero cuando languageChanged() Llamado no cambia, así que no veo ninguna salida de consola.

Agradecería cualquier ayuda.

0
Gyuzal R 27 jun. 2019 a las 16:32

1 respuesta

La mejor respuesta

ngOnInit se llama una vez cuando el componente se inicializa por primera vez. Si desea capturar cambios adicionales a un @Input, debe usar el gancho ngOnChanges. Sin embargo, en los tipos complejos (objeto, matriz) ngOnChanges se llamará si la referencia del objeto / matriz cambia y no se llamará si un campo de cambios de objeto o elementos de los cambios de matriz.

Si desea que los cambios sean capturados en cada llamada de languageChanged().

En AComponent

  ngOnInit() {
    // clones the object with a brand new reference
    const tmpDetails = JSON.parse(JSON.stringify(this.details));
    if (this.currentLanguage === "English") {
      tmpDetails.header_class = "line1 font50";
    }
    else {
      tmpDetails.header_class = "line2 font90";
    }
    this.details = tmpDetails;
  }

En WarningComponent

export class WarningComponent implements OnChanges  {
  @Input() details: any;

  ngOnChanges() {
    console.log("details:", this.details);
  }
}

Aquí hay una demostración de trabajo https://stackblitz.com/edit/angular-yhv8qq

0
ysf 27 jun. 2019 a las 13:59