ngModelがユーザー入力なしのコンポーネントから変更されたときにngModelChangeが発生しない

Question

入力のngModelに基づいて内部値を更新する指示があります。これは、ユーザーが手動で値を入力するとうまく動作しますが、ngModelがコンポーネントから変更されたときに機能しなくなります。

コンポーネントテンプレート：

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

は、コンポーネントにngModelを変更する：

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

指令：ngModelは、APIコールの後、コントローラから更新された場合

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

、ngModelChangeディレクティブで_valueInDirectiveは更新されません。 ngModelが更新されるたびに、directiveの値も同様に変更されるようにするにはどうすればよいですか？

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