Erkennen, wenn Eingangswert in Direktive geändert

Question

Ich versuche zu erkennen, wenn der Wert eines Eingangs in einer Direktive geändert wurde. Ich habe die folgende Anweisung:

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

Das Problem in dieser Richtlinie ist es, dass es nur erkennt, wenn es eine Eingabe und nicht, wenn sich der Wert ändert programmatisch. Ich benutze Reacive Form und manchmal setze ich den Wert mit der patchValue() Funktion. Wie kann ich die Change-Funktion auslösen?

Answer 1

Sie müssen eine Eingabeeigenschaft von input eingeben und dann den ngOnChanges -Hook verwenden, um zu ermitteln, wann sich die Eingabeeigenschaft ändert.

@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

Answer 2

können Sie auch HostListener verwenden. Weitere Informationen zum HostListener finden Sie unter this link. Hier ist der 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'); 
    } 

}