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

Posted 2023-02-23

【中文标题】@Input() 上的触发函数已更改

【英文标题】：Trigger function on @Input() changed

【发布时间】：2019-08-21 16:52:33

【问题描述】：

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

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

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

@Input() idElement : number;

还有一个函数叫

getSpecs()

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

【问题讨论】：

angularfirebase.com/lessons/…

像这样：***.com/q/38571812/4636715 ?

【参考方案1】：

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

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

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

文档是here。

【参考方案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();
        
    

希望这会有所帮助！ :)

【参考方案3】：

你可以试试这些

从 child component 的角核心包中导入 OnChanges

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  

只要你在父组件中发生变化，它就会影响到子组件