Angular2当输入改变时调用函数

Question

子组件：

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()函数？

- Bünyamin Sarıgül

Answer 1

您可以使用 ngOnChanges() 生命周期钩子

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

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

或使用setter

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

- Günter Zöchbauer

---

第一种方法中，我们能否确定哪个变量被改变了？ - Bünyamin Sarıgül

“changes”参数包含每个更改的输入条目。有关更多详细信息，请参见上面的“生命周期钩子”链接。 - Günter Zöchbauer

我注意到当父组件的输入属性重新赋值时，ngOnChanges()只会在子组件中调用。如果发生其他操作，例如如果父组件的输入属性是一个数组，并且向其中推入新值，则子组件不会得到更新。这是正确的吗？ - Aiguo

@Aiguo，你说得对。ngOnChanges()只有在Angular的变更检测检测到变更并更新了@Input()绑定后才会被调用。 - Günter Zöchbauer

@Aiguo 如果数组不起作用，请尝试克隆数组并将新属性推入新克隆的数组中 - 如果您希望Angular检测更改。 - yehonatan yehezkel