如何控制Angular组件模板内的服务方法调用，避免重渲染重复执行

是否需要优化 #

如果你的getter逻辑仅和示例一致，只是读取表单控件的内置状态，没有额外的 heavy 计算，那么这类重复调用不会造成可感知的性能问题，不需要做额外优化。
如果后续确实要加入大量计算逻辑，再做针对性优化即可，不必提前过度优化。

不用ChangeDetectionStrategy.OnPush的解决方案 #

1. 搭配RxJS流 + async管道 #

这是Angular生态下最推荐的方案，async管道会自动处理订阅销毁，且仅当流推送新值时才会更新视图，不会在每次变更检测时重复执行逻辑。
服务层改造示例：

// DynamicFormService
import { map, startWith } from 'rxjs';

// 把原来的getter改成响应式流
public countriesValidity$ = this.form.get('countries')!.statusChanges.pipe(
  map(() => {
    const control = this.form.get('countries');
    return !!control?.invalid && (!!control?.dirty || !!control?.touched);
  }),
  startWith(false) // 给初始状态赋值
);

模板层使用：

<mat-error *ngIf="formService.countriesValidity$ | async">
  {{"COMMON.messages.error" | translate}}
</mat-error>

动态表单字段也可以用同样思路，监听formArray的valueChanges事件，有变更时才返回最新的控件列表，模板用async管道接收即可。

2. 手动缓存计算结果 #

如果不想改现有模板代码，可以在服务内部做缓存，仅当依赖的表单状态变更时才重新计算值，模板直接读取缓存结果即可。
服务层改造示例：

// DynamicFormService
private _countriesValidity = false;

constructor() {
  // 只在目标控件状态变化时重新计算并更新缓存
  this.form.get('countries')?.statusChanges.subscribe(() => {
    const control = this.form.get('countries');
    this._countriesValidity = !!control?.invalid && (!!control?.dirty || !!control?.touched);
  })
}

// 模板调用的getter直接返回缓存值，无额外计算
public get countriesValidity(): boolean {
  return this._countriesValidity;
}

3. 封装纯管道 #

Angular的纯管道默认只有输入参数发生引用变化时才会重新执行逻辑，你可以把通用的校验逻辑封装成纯管道复用：
首先定义管道：

import { Pipe, PipeTransform } from '@angular/core';
import { AbstractControl } from '@angular/forms';

@Pipe({
  name: 'controlIsInvalid',
  pure: true // 默认为true，可省略
})
export class ControlIsInvalidPipe implements PipeTransform {
  transform(control: AbstractControl | null | undefined): boolean {
    if (!control) return false;
    return control.invalid && (control.dirty || control.touched);
  }
}

模板中直接使用：

<mat-error *ngIf="formService.form.controls.countries | controlIsInvalid">
  {{"COMMON.messages.error" | translate}}
</mat-error>

内容的提问来源于stack exchange，提问作者gearsdigital