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