javascript - 检测组件内模型数据的变化

Question

我想我可能遗漏了一些非常明显的东西，但这是我的情况 - 我有一些数据被分配给组件的 ngModel 输入，例如:

typescript :

SomeData = {
  SomeValue: 'bar'
}

View 模板片段:

<foo [(ngModel)]="SomeData.SomeValue"></foo>

组件:

import { Component, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'foo',
  template: `<input type="text" [ngModel]="value" (ngModelChange)="modelChange($event) 
(change)="elementChange($event)"/>`
})
export class FooComponent {

  ngOnChanges(changes: SimpleChanges) {
    // Fired when @Input members change
  }

  modelChange(value) {
    // Fired when a change in the HTML element will change the model, *not* when the model changes from elsewhere 
  }

  elementChange(event) {
    // Fired when the HTML element value changes
  }
}

根据我在示例中的评论，我能够判断输入何时更改、HTML 元素的值何时将更改模型以及 HTML 元素的值何时更改。

我希望能够从组件内部知道 View 模板中分配给 ngModel 的属性(即 SomeData.SomeValue)何时发生变化。我知道 Angular 会自己执行此操作，因为它会更新 HTML 中的值，但是我也不知道如何从组件内部拦截此更改，因此可能会采取其他一些操作。

Answer 1

SomeData.SomeValue 不受 Angular 控制，您所做的只是告诉 Angular 绑定(bind)到一个属性并绑定(bind)到一个事件。然后 Angular 将运行它自己的更改检测机制来更新 View 。如果您对 Angular 如何做到这一点感兴趣，请查看此 blog .

如果您希望在 SomeData.SomeValue 发生更改时收到通知，您必须设置自己的系统，这可以像回调或发布/订阅一样简单。但它真的太宽泛了，无法进入这里。