@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

没有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

你可以尝试这些

1. 从你的OnChanges中的角度核心包导入child component import { Component, Input, OnChanges , SimpleChanges} from '@angular/core';
2. 像你这样实现你的孩子班 export class YourComponent implements OnChanges
3. 创建OnChanges方法

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

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