Question

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

打字稿：

SomeData = {
  SomeValue: 'bar'
}

视图模板的片段：

<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元素的值何时更改。

我希望能够在组件内部知道视图模板中分配给ngModel的属性（即SomeData.SomeValue）何时发生变化。我知道Angular本身就是这样做的，因为它更新了HTML中的值，但是我也不知道如何从组件中拦截这个变化，所以可能会采取其他一些行动。

Answer 1

SomeData.SomeValue不受角度控制，你所做的就是告诉angular绑定到一个属性并绑定到一个事件。然后，Angular将运行它自己的更改检测机制，该机制将更新视图。如果您对Angular的处理方式感兴趣，请查看此blog。

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

检测组件中模型数据的更改

1 个答案: