在Angular [duplicate]中分配多个属性值后调用方法

Question

我有一个具有两个输入属性的 Angular 组件。我想在设置两个属性时调用一个方法，是否有任何事件可以使用？

export class ProductComponent implements OnInit {

  _product: Product;
  @Input() set product(value: Product) {
      _product = value;
  }
  
  _attributeType: any;
  @Input() set attributeType(value: any) {
      _attributeType = value; 
      this.doSomeWorkWhenBothProductAndAttributeTypeAreSet();
  }
 
  doSomeWorkWhenBothProductAndAttributeTypeAreSet() {
  }
}

在上面的代码示例中，当已经分配了产品和属性类型时，我想调用dosomeworkfwhentbothproductandattributetypeareset()。我尝试在设置第二个属性后调用该方法，但有时产品需要更长的时间来分配，因此无法按预期工作。

Answer 1

Angular有一些lyfecycle钩子，只能在确定的时刻用于执行部分逻辑，这是组件具有的每个生命周期钩子的列表：

现在，angular第一次在< code>ngOnInit之前调用< code>ngOnChanges,以允许您使用Init上的值访问< code>@Input()变量。说你有两种主要的方法来实现你的目标:

<李>通过使用<代码> ngOnChanges() < /代码>:< /

public ngOnChanges(changes: SimpleChanges): void {
    // you can check here if your props are set and if so call your method
    console.log(changes['YOUR_PROP'].currentValue);
}

注意，这个方法将在每次@Input()属性更新时被调用

public ngOnInit(): void {
    // here you can access your props since angular has called onChanges before and has already initialized them
}

Answer 2

您可以实现 OnChanges 接口以检查对输入属性的更改，并根据此添加一些逻辑。

export class ProductComponent implements OnInit, OnChanges {

  @Input() set product(value: Product) {
      _product = value;
  }
  
  _attributeType: any;
  @Input() set attributeType(value: any) {
      _attributeType = value; 
  }
 
  ngOnChanges(simpleChange: SimpleChanges) {
    if (this._attributeType && this._product) {
      this.doSomeWorkWhenBothProductAndAttributeTypeAreSet();
    }

    // or check simpleChange to retrieve some informations :
    // - new value
    // - previous value
  }

  doSomeWorkWhenBothProductAndAttributeTypeAreSet() {
  }
}

有关官方文档的更多详细信息