angular2 @input - 变化检测

Posted 2023-02-23

【中文标题】angular2 @input - 变化检测

【英文标题】：angular2 @input - change detection

【发布时间】：2017-06-03 06:31:10

【问题描述】：

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

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

@Input() inputData: InputData;

【参考方案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。