问当@Input()值在Angular中发生变化时，如何检测？

EN

实际上，当angular2+中的子组件中的输入发生变化时，可以通过两种方式进行检测和操作:

1. 您可以使用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

演示示例:查看this plunker

1. Alternately，您还可以使用输入属性设置器，如下所示：

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

文档链接:查看here。

演示示例:查看this plunker。

您应该使用哪种方法？

如果您的组件有多个输入，那么，如果您使用ngOnChanges()，您将在ngOnChanges()中一次获得所有输入的所有更改。使用这种方法，您还可以比较已更改的输入的当前值和以前的值，并采取相应的操作。

但是，如果您想在只有一个特定的输入更改时执行某些操作(而不关心其他输入)，那么使用输入属性设置器可能会更简单。但是，这种方法没有提供一种内置的方法来比较更改后的输入的以前和当前值(使用ngOnChanges生命周期方法可以很容易地做到这一点)。

EDIT 2017-07-25:在某些情况下，角度变化检测可能仍不会触发

通常，只要父组件更改了它传递给子组件的数据，只要数据是JS原始数据类型(字符串、数字、布尔值)，就会触发对setter和ngOnChanges的更改检测。但是，在以下情况下，它将不会触发，您必须采取额外的操作才能使其工作。

1. 如果您使用嵌套对象或数组(而不是JS基元数据类型)将数据从父对象传递给子对象，则可能不会触发更改检测(使用setter或ngchange)，这在user: muetzerich的回答中也有提到。有关解决方案，请查看here.

1. 如果您在angular上下文之外(即，外部)更改数据，则angular将不会知道这些更改。您可能必须在组件中使用ChangeDetectorRef或NgZone，以使angular感知外部更改，从而触发更改检测。请参阅this.

在组件中使用ngOnChanges()生命周期方法。

在检查完数据绑定属性之后，如果视图和内容子级中至少有一个发生了更改，则会在检查它们之前立即调用

ngOnChanges。

这是Docs。

在函数签名中使用SimpleChanges类型时，我在控制台、编译器和集成开发环境中遇到错误。为防止出现错误，请在签名中使用any关键字。

ngOnChanges(changes: any) {
    console.log(changes.myInput.currentValue);
}

编辑：

正如Jon在下面指出的，在使用括号表示法而不是点表示法时，可以使用SimpleChanges签名。

ngOnChanges(changes: SimpleChanges) {
    console.log(changes['myInput'].currentValue);
}