输入更改时的Angular2调用函数

Posted 2023-02-23

【中文标题】输入更改时的Angular2调用函数

【英文标题】：Angular2 Call Function When the Input Changes

【发布时间】：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() ？

【参考方案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 如果它不在数组中，则尝试克隆数组并将新属性推送到新克隆的数组 - 如果你想从角度检测变化。