當ngModel從沒有用戶輸入的組件更改時，ngModelChange不會觸發

Question

我有一個指令應該根據輸入的ngModel更新一些內部值。當用戶手動輸入值時，這可以正常工作，但在從組件更改ngModel時停止工作。

組件模板：

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

在成分變更ngModel：

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

指令：

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

如果ngModel從控制器的API調用之後更新，ngModelChange在指令不會觸發並且_valueInDirective不會更新。如何確保每次ngModel更新時，指令中的值也會被更改？

Answer 1

我試用了DoCheck掛鉤，但事實證明它效率極低。這是我最終解決的解決方案，我很滿意：

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