如何在angular 2中每次模型更改时调用函数？

Question

我有一个自定义的选择组件，当你点击一个li项目时，它会设置模型，但由于我手动调用this.modelChange.next（this.model）每次我更改模型时，它都会非常混乱，而且是可重复的，这是我想要避免的。

所以我的问题是，是否有类似于的东西。$watch，我可以观察值是否发生变化，然后在每次发生时调用this.modelChange.next（this.model）。

我一直在阅读可观测数据，但我不知道如何将其用于一个简单的值，因为我看到的所有示例都是针对外部api： s的异步请求。

肯定有更简单的方法来实现这一点吗？

（并不是说我不能使用ngModelChange，因为我实际上没有为此使用输入）。

import {Component, Input, Output, EventEmitter, OnInit, OnChanges} from 'angular2/core';

@Component({
  selector: 'form-select',
  templateUrl: './app/assets/scripts/modules/form-controls/form-select/form-select.component.html',
  styleUrls: ['./app/assets/scripts/modules/form-controls/form-select/form-select.component.css'],
  inputs: [
    'options',
    'callback',
    'model',
    'label'
  ]
})

export class FormSelectComponent implements OnInit, OnChanges {
  @Input() model: any;
  @Output() modelChange: EventEmitter = new EventEmitter();

  public isOpen: boolean = false;

  ngOnInit() {

    if (!this.model) {
      this.model = {};
    }

    for (var option of this.options) {

      if (option.model == (this.model.model || this.model)) {
        this.model = option;

      }
    }
  }

  ngOnChanges(changes: {[model: any]: SimpleChange}) {
    console.log(changes);
    this.modelChange.next(changes['model'].currentValue);
  }

  toggle() {
    this.isOpen = !this.isOpen;
  }

  close() {
    this.isOpen = false;
  }

  select(option, callback) {
    this.model = option;
    this.close();

    callback ? callback() : false;
  }

  isSelected(option) {
    return option.model === this.model.model;
  }
}

编辑：我尝试使用ngOnChange（见上面更新的代码），但它只在初始化时运行一次，然后它不会检测到更改。有什么不对劲吗？

Answer 1

ngAfterViewChecked是一种更好的生命周期方法，因为它在呈现DOM之后被调用，并且任何操作都可以在这里完成。

https://stackoverflow.com/a/35493028/6522875

Answer 2

如果您选择“自定义组件内部使用表单输入”，我将在其上利用ngModelChange事件：

<select [ngModel]="..." (ngModelChange)="triggerUpdate($event)">…</select>

或相应控件的可观察值变化（如有）。在模板中：

<select [ngFormControl]="myForm.controls.selectCtrl">…</select>

在组件中：

myForm.controls.selectCtrl.valueChanges.subscribe(newValue => {
  (...)
});

Answer 3

所以我的问题是，是否有类似于$scope的东西。$watch在哪里我可以看到输入属性model的值是否改变

如果model是JavaScript基元类型（数字、字符串、布尔值），则可以实现ngOnChanges（）以获得更改通知。请参阅cookbook示例和lifecycle文档的OnChanges部分。
另一个选项是使用setter和getter。参见烹饪书示例。

如果Model是一个JavaScript引用类型（Array， Object， Date等），那么如何检测更改取决于模型如何更改：

• 如果模型引用发生更改（即，您分配了一个新数组或一个新对象等），您可以实现ngOnChanges（）以获得更改通知，就像对于基本类型一样。
• 但是，如果模型引用没有更改，但是模型的某些属性更改（例如，数组项的值更改，或者添加或删除数组项，或者如果对象属性值更改），则可以实现ngDoCheck（），以实现您自己的更改检测逻辑
  请参见生命周期文档的DoCheck部分