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