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

Question

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

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

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

@Input() idElement : number;

还有一个函数叫

getSpecs()

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

Answer 1

还有另一种选择，不带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 2

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

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

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

文档在这里。