输入更改时的Angular2调用函数答案

【问题标题】：Angular2 Call Function When the Input Changes输入更改时的Angular2调用函数
【发布时间】：2017-01-12 20:32:25
【问题描述】：

子组件：

export class Child {
    @Input() public value: string;
    public childFunction(){...}
}

父组件：

export class Parent {
    public value2: string;
    function1(){ value2 = "a" }
    function2(){ value2 = "b" }
}

父视图：

<child [value]="value2">

有没有办法在这个结构中每次更改 value2 时调用 childFunction() ？

【问题讨论】：

标签： javascript angular data-binding

【解决方案1】：

您可以使用ngOnChanges() lifecycle hook

export class Child {
    @Input() public value: string;

    ngOnChanges(changes) {
      this.childFunction()
    }
    public childFunction(){...}
}

或使用二传手

export class Child {
    @Input() 
    public set value(val: string) {
      this._value = val;
      this.childFunction();
    }
    public childFunction(){...}
}

【讨论】：

第一种方法中，我们能判断出哪个变量被改变了吗？
changes 参数包含每个更改输入的条目。有关详细信息，请参阅上面的“生命周期挂钩”链接。
我注意到 ngOnChanges() 只会在父输入属性被重新分配时在子组件中被调用。如果发生任何其他操作，例如父输入属性是一个数组并且将新值推送给它们，则子元素不会得到更新。对吗？
@Aiguo 没错。 ngOnChanges() 仅在 Angulars 更改检测检测到更改并更新 @Input() 绑定后调用。
@Aiguo 如果它不在数组中，则尝试克隆数组并将新属性推送到新克隆的数组 - 如果你想从角度检测变化。