@Input() 上的触发函数已更改答案

【问题标题】：Trigger function on @Input() changed@Input() 上的触发函数已更改
【发布时间】：2019-08-21 16:52:33
【问题描述】：

我有一个父组件，在 parent.component.html 中有如下代码：

<app-child [idElement]=(idElement)></app-child>

在子组件中，我有这样的输入参数：

@Input() idElement : number;

还有一个函数叫

getSpecs()

我希望在父级修改输入时由子级执行getSpecs() 函数。这可能吗？

【问题讨论】：

angularfirebase.com/lessons/…
像这样：stackoverflow.com/q/38571812/4636715 ?

标签： angular input components parent

【解决方案1】：

为此，您必须使用 Angular 生命周期挂钩 ngOnChanges。

在你的情况下，它会是这样的：

ngOnChanges(changes: SimpleChanges) {
    if (changes['idElement']) {
        // Do your logic here
        this.getSpecs()
    }
}

文档是here。

【讨论】：

【解决方案2】：

没有OnChanges还有另一个选项。

@Component({
    selector: 'app-child',
    template: '<div></div>'
})
export class AppChildComponent {
    private _idElement: number;

    get idElement(): number {
        return this._idElement;
    }

    @Input('idElement') set idElement(value: number) {
        if (value) {
            this._idElement = value;
            this.getSpecs();
        }
    }
}

希望这会有所帮助！ :)

【讨论】：

【解决方案3】：

你可以试试这些

从 child component 的角核心包中导入 OnChanges

import { Component, Input, OnChanges , SimpleChanges} from '@angular/core';
像实现你的子类

export class YourComponent implements OnChanges

创建OnChanges类似的方法

ngOnChanges(changes:SimpleChanges){
  console.log(changes.your input property name);
 // implement your logic here  
}

只要你在父组件中发生变化，它就会影响到子组件

【讨论】：