Question

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

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

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

@Input() idElement : number;

还有一个名为

的函数

getSpecs()

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

Answer 1

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

在您的情况下，它将类似于：

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

文档为here。

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

希望这会有所帮助！：）

Answer 3

您可以尝试这些

从OnChanges的角铁芯包中导入child component

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  
}

只要父组件发生更改，它将影响子组件

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

3 个答案: