当创建组件（并因此）用现有数据填充我的输入时，如何抑制 ngModelChange 触发？

Question

问题的基本前提如下：

我有一个具有各种（自定义）输入的组件，当这些输入值中的任何一个发生变化时，我都会对 API 端点进行 HTTP 调用，以重新计算我的受众范围，即它是一个营销活动系统，并且当用户定义受众人口统计时受众“到达”发生变化。

我使用 ngModelChanges 触发调用，效果非常好。

但是，我的问题是，当组件加载现有数据（来自之前的保存）时，它会填充输入，从而导致 ngModelChange 触发，从而导致我的 HTTP 调用在页面加载时多次触发。

示例 HTML：

<app-custom-input
        id="age-from"
        name="age-from"
        [(ngModel)]="audienceModel.ageFrom"
        [type]="'number'"
        (ngModelChange)="calcReach()"
></app-custom-input>
<app-custom-input
        id="age-to"
        name="age-to"
        [(ngModel)]="audienceModel.ageTo"
        [type]="'number'"
        (ngModelChange)="calcReach()"
></app-custom-input>

注意：我的自定义输入确实实现了ControlValueAccessor

.ts 文件：

calcReach() {
    if (!this.loading$.getValue()) {
      const filters = {
        ...this.audienceModel,
        audienceFileId: this.campaignService.campaign.audienceFileId
      };
      this.calcAudienceReach$ = this.campaignService.calcAudienceReach(filters).subscribe((reach: number) => {
        console.log('calc audience reach: ', reach);
      });
    }
  }

可以看出，我确实尝试使用在 ngOnInit() 末尾设置为 false 的加载指示器，但 ngModelChange 触发的调用都发生在 OnInit 之后（或之前？）。

我的组件实现了一个抽象组件，其中加载指示器定义为：

public loading$: BehaviorSubject<boolean> = new BehaviorSubject(true);

即它的初始值设置为 true（在抽象组件中），并且仅在 ngOnInit 结束时更改为 false（在实际组件中）。