angular2 @input - 变化检测

【问题标题】：angular2 @input - change detectionangular2 @input - 变化检测
【发布时间】：2017-06-03 06:31:10
【问题描述】：

有没有办法监听@Input 的变化？

在以下示例中，我希望在 'inputData' 值发生更改时得到通知。

@Input() inputData: InputData;

【问题讨论】：

标签： angular typescript data-binding

【解决方案1】：

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


export class Demo implements OnChanges {

 @Input() inputData: InputData;
 ngOnChanges(changes: {[propertyName: string]: SimpleChange}) {

    if (changes['inputData'] && this.inputData) {

        //your logic work when input change
    }
 }

}

【讨论】：

【解决方案2】：

你可以使用类似的东西：

Input('value')
set value(val: string) {
  this._value = val;
  console.log('new value:', value); // <-- do your logic here!
}

更多信息请访问link

你也可以看看this article

【讨论】：

【解决方案3】：

您可以在组件内收听OnChanges 组件生命周期事件

ngOnChanges(model: SimpleChanges){
   console.log(model)
}

【讨论】：

【解决方案4】：

是的，你可以使用OnChanges生命周期事件：

@Input() inputData: InputData;

ngOnChanges() {
    console.log(this.inputData);
}

阅读更多关于 Angular 的生命周期事件here。

【讨论】：