如何检测Angular中@Input()值何时更改？

在Angular中，当我们在一个组件中使用@Input()注解来接收来自另一个组件的数据时，常常需要知道这些输入属性何时更改。这时候，我们就可以使用ngOnChanges生命周期钩子去检测这些变化。

ngOnChanges生命周期钩子

ngOnChanges是Angular中的一个生命周期钩子，用于检测输入属性的变化。在每个输入属性的值发生变化时，ngOnChanges都会被调用。

下面是一个典型的ngOnChanges代码示例：

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

@Component({
    selector: 'app-parent',
    template: `
        <app-child [name]="name"></app-child>
    `
})
export class ParentComponent implements OnChanges {
    @Input() name: string;

    ngOnChanges(changes: SimpleChanges) {
        for(let propName in changes) {
            let change = changes[propName];
            console.log(change);
        }
    }
}

@Component({
    selector: 'app-child',
    template: ``
})
export class ChildComponent {
    @Input() name: string;
}

在上面的代码中，我们定义了两个组件，ParentComponent和ChildComponent。ParentComponent作为父组件向ChildComponent传递了一个名称属性name。ChildComponent简单地接收这个属性值。

当父组件的name属性值发生变化时，ngOnChanges方法被调用。我们通过遍历SimpleChanges对象来检查属性值的变化。SimpleChanges对象包含一个key-value对应的映射，其中key是Input属性的名称，value是一个包含当前值和原始值的对象。

通过这个方式，我们就可以在Angular中检测输入属性的变化，并做出相应的处理。