ngModelChange wird nicht ausgelöst, wenn ngModel von der Komponente ohne Benutzereingabe geändert wird

Question

Ich habe eine Direktive, die einige interne Werte basierend auf dem ngModel der Eingabe aktualisieren sollte. Dies funktioniert gut, wenn der Benutzer Werte manuell eingibt, aber nicht mehr funktioniert, wenn ngModel von der Komponente geändert wird.

Komponentenvorlage:

<input [(ngModel)]="myValue" myExample> 

Ändern ngModel in Komponente:

ngOnInit() { 
    this.getDataFromApi() 
    .then((result) => { 
    this.myValue = result; 
    }) 
} 

Richtlinie:

import { Directive, OnInit } from '@angular/core'; 
import { NgModel } from '@angular/forms'; 

@Directive({ 
    selector: '[myExample][ngModel]', 
    providers: [NgModel], 
    host: { 
    '(ngModelChange)' : 'onModelChange($event)', 
    } 
}) 
export class myExampleDirective implements OnInit { 
    private _valueInDirective; 

    constructor(private _element: ElementRef, private _model: NgModel) { } 

    onModelChange(event) { 
    this._valueInDirective = event; 
    } 
} 

Wenn der ngModel von der Steuerung nach einem API-Aufruf aktualisiert wird, ngModelChange in Richtlinie feuert nicht und die _valueInDirective wird nicht aktualisiert. Wie kann man sicherstellen, dass jedes Mal, wenn das ngModel aktualisiert wird, der Wert in Direktive ebenfalls geändert wird?

Answer 1

Ich experimentierte mit DoCheck Haken, aber es erwies sich als äußerst ineffizient. Dies ist die Lösung, mit der ich gelandet bin und ich bin glücklich mit:

import { Directive, OnInit } from '@angular/core'; 
import { NgModel } from '@angular/forms'; 

@Directive({ 
    selector: '[myExample][ngModel]', 
    providers: [NgModel] 
}) 
export class myExampleDirective implements OnInit { 
    private _valueInDirective; 

    constructor(private _model: NgModel) { } 

    ngOnInit() { 
    this._model.valueChanges.subscribe((event) => { 
     this._valueInDirective = event; 
     // do other stuff 
    }); 
    } 
}