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

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

你可以试试这些

从 child component
中的 angular 核心包导入 OnChanges
import { Component, Input, OnChanges , SimpleChanges} from '@angular/core';
实现你childclass喜欢

export class YourComponent implements OnChanges

像

一样创建OnChanges方法

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

只要您对 parent 组件进行更改，它就会影响 child 组件

Answer 3

还有一个选项没有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();
        }
    }
}

希望对您有所帮助！ :)

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

Trigger function on @Input() changed

components

input

parent

angular