@Input（） 上的触发函数已更改

Question

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

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

在子组件中，我有如下输入参数：

@Input() idElement : number;

还有一个名为

getSpecs()

当父输入被修改时，我希望子输入执行< code>getSpecs()函数。这可能吗？

Answer 1

你可以试试这些

>

从子组件中的角度核心包导入OnChanges

从“@角/核心”导入{Component， Input， OnChange， SimpleChange}；

像这样实现你的子类

导出类“你的组件”实现“更改”

创建OnChange方法，如

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

每当您在父组件中发生更改时，它都会影响子组件

Answer 2

还有另一个没有“更改”的选项。

@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();
        }
    }
}

希望这有帮助！：）

Answer 3

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

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

js prettyprint-override">ngOnChanges(changes: SimpleChanges) {
    if (changes['idElement']) {
        // Do your logic here
        this.getSpecs()
    }
}

文档在这里。