在没有用户输入的情况下从组件更改 ngModel 时不会触发 ngModelChange答案

【问题标题】：ngModelChange doesn't fire when ngModel is changed from the component without user input在没有用户输入的情况下从组件更改 ngModel 时不会触发 ngModelChange
【发布时间】：2018-02-02 09:09:16
【问题描述】：

我有一个指令应该根据输入的 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;
  }
}

如果在 API 调用后从控制器更新 ngModel，则指令中的 ngModelChange 不会触发并且 _valueInDirective 不会更新。如何确保每次更新 ngModel 时，指令中的值也会改变？

【问题讨论】：

这不应该。 ngModelChange 仅在输入元素值更改时发出。
@GünterZöchbauer，但是在 ngModel 改变之后，输入元素的值也会改变，对吧？
当[ngModel]="myValue" 的更改检测检测到myValue 已更改时，它将更新ngModel 属性。 Angular 不观察随机字段的变化，它只观察绑定。 (ngModelChange)（[(ngModel)] 的 () 部分）仅在 NgModel 指令调用 this.ngModelChange.next(someValue) 时调用
这没什么用。我仍然不知道为什么当值明显改变时它不触发。
因为它只是故意设计为不这样做，而且我认为没有必要。如果确实如此，它基本上只会导致无限循环。你真正想要完成什么？更改值时，您可以自己致电ngModelChange(...);。

标签： angular

【解决方案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
    });
  }
}

【讨论】：

那么在改变值的时候自己调用方法有什么问题呢？您还可以使您绑定到 getter/setter 的字段并在 setter 中调用其他代码。
因为我在控制器中改变了值，需要在指令中调用一个方法。我第三次重复这个信息。
看起来是一种解决方法，我很失望它无法触发 @HostListener('ngModelChange') ！但是，它仍然有效