web-dev-qa-db-fra.com

Détecter quand la valeur d'entrée a changé dans la directive

J'essaie de détecter quand la valeur d'une entrée a changé dans une directive. J'ai la directive suivante:

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');
    }
}

Le problème de cette directive est qu’elle ne détecte que s’il ya une entrée et non pas lorsque la valeur change par programmation. J'utilise la forme réacive et parfois je règle la valeur avec la fonction patchValue(). Comment puis-je déclencher la fonction de changement?

angularangular-directiveangular2-directives
19
ncohen

Vous devez créer une propriété d'entrée input, puis utiliser le crochet ngOnChanges pour indiquer le moment où la propriété d'entrée change.

@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

36
Teddy Sterne

Il existe un meilleur moyen d’utiliser ce résultat, utilisé par exemple dans *ngIf Angular code source .

Vous pouvez combiner un _@Input() avec un setter. Lorsque l'entrée change, le poseur est rappelé.

@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 :(");
  }
}

Vous pouvez enregistrer la valeur précédente dans la propriété Directive afin de l'utiliser ultérieurement et la comparer à la nouvelle valeur:

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;  
}
0
Cristian Traìna

Vous pouvez également utiliser HostListener. Pour plus d'informations sur HostListener, vous pouvez consulter ce lien . Voici le code.

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');
    }

}
0
Tushar Ghosh