Angular子组件ngOnChanges触发后Getter持续调用问题求助

Angular默认变更检测机制会在鼠标移动、键盘输入等用户交互，或是定时器触发、HTTP请求完成等场景下执行全局检测。模板中绑定的getter（Filter、check）和方法调用（check.includes()），每次变更检测都会被重新执行，这就是鼠标微动时它们持续触发的核心原因。此外你的代码还存在订阅未清理的内存泄漏风险。

1. 用属性缓存替代模板中的getter与方法调用 #

将需要在模板中使用的值提前计算并缓存为组件属性，避免每次变更检测都重复计算：

修改ChildComponent.ts #

import { Component, Input, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs';

export class ChildComponent implements OnChanges, OnDestroy {
  @Input() dataFromParent: string;
  valueFromService: any;
  // 缓存计算后的Filter值
  filterValue: string;
  // 固定值设为只读常量，避免每次创建新数组
  readonly CHECK_VALUES = ['test1', 'test2'];
  // 存储订阅实例，用于销毁时取消
  private serviceSubscription?: Subscription;

  constructor(private service: Service) {}

  ngOnChanges(changes: SimpleChanges): void {
    // 校验输入值是否在允许范围内
    if (this.dataFromParent && this.CHECK_VALUES.includes(this.dataFromParent)) {
      // 先取消旧订阅，防止内存泄漏
      this.serviceSubscription?.unsubscribe();
      this.serviceSubscription = this.service.subscribe((result) => {
        this.valueFromService = result;
        // 输入值或服务返回值变化时，更新缓存的Filter值
        this.updateFilterValue();
      });
    }
  }

  // 单独封装Filter值的计算逻辑
  private updateFilterValue(): void {
    switch (this.dataFromParent) {
      case 'test1':
        this.filterValue = this.valueFromService?.['A'] || '';
        break;
      case 'test2':
        this.filterValue = this.valueFromService?.['B'] || '';
        break;
      default:
        this.filterValue = '';
    }
  }

  ngOnDestroy(): void {
    // 组件销毁时强制取消订阅
    this.serviceSubscription?.unsubscribe();
  }
}

修改ChildComponent.html #

<div *ngIf="dataFromParent && CHECK_VALUES.includes(dataFromParent)">
  {{ valueFromService }} {{ filterValue }}
</div>

2. 优化变更检测策略（可选） #

如果组件不需要频繁响应外部变更，可以将组件的变更检测策略改为OnPush，仅当输入属性引用变化、组件内部主动触发变更检测，或是通过async管道订阅Observable时，才会执行变更检测：

import { ChangeDetectionStrategy, Component } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ChildComponent implements OnChanges, OnDestroy {
  // 其余代码不变
}

3. 模板编写规范 #

Angular模板应尽量避免直接调用方法或getter，除非是无副作用、相同输入返回固定结果的纯函数且计算成本极低。所有需要在模板中展示的计算值，都应提前缓存到组件属性中，仅在依赖数据变化时重新计算。

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