angular监听输入框值的变化_如何在Angular2中检测@Input（）值的变化

实际上，当angular2 +中的子组件input发生变化时，有两种方法可以检测和处理：

您可以使用ngOnChanges()生命周期方法 ，也可以在以前的答案中提到：

@Input() categoryId: string; ngOnChanges(changes: SimpleChanges) { this.doSomething(changes.categoryId.currentValue); // You can also use categoryId.previousValue and // categoryId.firstChange for comparing old and new values }

文档链接： ngOnChanges， SimpleChanges， SimpleChange

演示例子：看看这个笨蛋

或者，您也可以使用input属性设置器 ，如下所示：

private _categoryId: string; @Input() set categoryId(value: string) { this._categoryId = value; this.doSomething(this._categoryId); } get categoryId(): string { return this._categoryId; }

文档链接：看这里 。

演示例子：看看这个笨蛋 。

哪种方法应该使用？

如果你的组件有几个input，那么，如果你使用ngOnChanges()，你将在ngOnChanges()中同时获得所有input的所有改变。 使用这种方法，您还可以比较已更改input的当前值和以前的值，并据此采取相应措施。

但是，如果只想在某个特定的input发生变化时执行某些操作(而不关心其他input)，那么使用input属性设置器可能会更简单。 但是，这种方法并没有提供内置的方法来比较已更改input的前一个值和当前值(您可以使用ngOnChanges生命周期方法轻松完成此操作)。

编辑2017-07-25：angular度更改检测可能仍然不会在某些情况下火灾

通常， 如果数据是JS原始数据types(string，数字，布尔值)，则只要父组件更改传递给子组的数据，setter和ngOnChanges的更改检测就会触发。 但是，在下列情况下，它不会触发，您必须采取额外的行动才能使其正常工作。

如果您正在使用嵌套对象或数组(而不是JS原始数据types)将数据从Parent传递给Child，则更改检测(使用setter或ngchanges)可能不会触发，也正如用户在答复中所述：muetzerich。 对于解决scheme看这里 。

如果你在angular度上下文之外(即，外部)改变数据，则angular度将不知道这些改变。 您可能必须在您的组件中使用ChangeDetectorRef或NgZone来使angular度知道外部变化，从而触发更改检测。 参考这个 。