angular - Detectar cuándo se modificó el valor de entrada en la directiva.

ng-if

Question

Estoy tratando de detectar cuando el valor de una entrada cambió en una directiva. Tengo la siguiente directiva:

import { ElementRef, Directive, Renderer} from ''@angular/core'';

@Directive({
    selector: ''[number]'',
    host: {"(input)": ''onInputChange($event)''}
})

export class Number {

    constructor(private element: ElementRef, private renderer: Renderer){

    }
    onInputChange(event){
        console.log(''test'');
    }
}

El problema en esta directiva es que detecta solo cuando hay una entrada y no cuando el valor cambia programáticamente. Uso la forma reactiva y, a veces, establezco el valor con la función patchValue() . ¿Cómo puedo hacer que se active la función de cambio?

Answer 1

Hay una mejor manera de usar este resultado, que se usa, por ejemplo, en el código fuente *ngIf Angular.

Puedes combinar un @Input() con un setter . Cuando cambia la entrada, se vuelve a llamar al setter.

@Input() set numberOfWheels(wheels: number) {
  if(wheels === 2) {
    console.log("It''s a bike!");
  }
  else if(wheels === 4) {
    console.log("It''s a car!");
  }
  else {
    console.log("I don''t know what it is :(");
  }
}

Puede guardar el valor anterior en la propiedad Directiva para usarlo más adelante y compararlo con el nuevo valor:

private previousValue: any = null;

@Input() set myInputName(value: any) {
  console.log(`Previous value is: ${this.previousValue}`);
  console.log(`New value is: ${value}`);
  this.previousValue = value;  
}

Answer 2

También puede utilizar HostListener. Para obtener más información sobre HostListener, puede ir a través de este enlace . Aquí está el código.

import {Directive, ElementRef, HostListener} from ''@angular/core'';


@Directive({
       selector: ''[number]''
 })

export class NumberDirective {

    @Input() public number: any;
    @Input() public input: any;

    constructor(private el: ElementRef) {}

    @HostListener(''change'') ngOnChanges() {
        console.log(''test'');
    }

}

Answer 3

ngOnChanges crear una propiedad de input de input y luego usar el ngOnChanges para indicar cuándo cambia la propiedad de entrada.

@Directive({
    selector: ''[number]''
})
export class NumberDirective implements OnChanges {
    @Input() public number: any;
    @Input() public input: any;

    ngOnChanges(changes: SimpleChanges){
      if(changes.input){
        console.log(''input changed'');
      }
    }
}

Plunkr