ngOnChange 仅在订阅后单击屏幕上的某处后触发

编程问答 2022-04-24

问题描述

我有以下组件。 家长：

@Component({
  selector: 'test'
})

onAccountChange(account: AccountItem): void {
  this.appService.callApi.subscribe((data) => {
    this.availableInstrument = data
  })
}

而我的子组件如下：

@Component({
  selector: 'child'
})
export class Child implements OnInit,OnChanges {

  @Input('availableInstrument') availableInstrument!: any[]

  ngOnChanges() :void {
      console.log("Change")
      this.initializeComponent()
  }

我的问题是我注意到 ngOnChange 函数只有在我点击屏幕上的其他地方后才会被调用，即使回调函数 (onAccountChange) 已经完成并且 availableInstrument 已经从 api 调用中填充。我希望在从 api 调用更改输入数据后立即调用 ngOnChange 函数，而不必单击屏幕上的其他位置。如果我在回调函数中对输入值进行硬编码，我会看到 ngOnChange 在子组件中被立即调用，但在 subscribe 块中时不会。

非常感谢！

解决方法

您需要将更改检测策略设置为 onPush。

@Component({
  selector: "child",changeDetection: ChangeDetectionStrategy.OnPush
})
angular12angular2-observablesngonchangessubscribe