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