Angular变更检测：是否可仅修改基类将所有继承它的组件设为OnPush

Angular 默认不会继承父类的 @Component 装饰器配置，因此直接给 Base 基类添加 @Component({changeDetection: ChangeDetectionStrategy.OnPush}) 不会对子类生效，但是可以通过以下两种仅修改 Base 基类的方案实现需求：

方案1：反射动态修改子类组件元数据 #

该方案直接修改子类的组件装饰器配置，和手动给每个子类加OnPush效果完全一致：

import { ChangeDetectionStrategy } from '@angular/core';
import 'reflect-metadata';

export class Base {
  static {
    // 子类实例化时自动修改其组件元数据
    const originalConstructor = Base.prototype.constructor;
    Base.prototype.constructor = function (...args: any[]) {
      const subclass = this.constructor;
      // 读取类的注解元数据
      const annotations = Reflect.getMetadata('annotations', subclass);
      if (annotations) {
        // 找到@Component注解
        const componentMeta = annotations.find(anno => anno.constructor.name === 'Component');
        if (componentMeta) {
          // 统一设置为OnPush策略
          componentMeta.changeDetection = ChangeDetectionStrategy.OnPush;
        }
      }
      return originalConstructor.apply(this, args);
    };
  }

  // 基类原有业务逻辑
}

• 优点：和原生配置OnPush效果完全一致，不需要额外模拟触发逻辑，适配JIT编译模式，AOT模式下仅需调整元数据读取规则即可复用逻辑
• 缺点：依赖Angular内部元数据规则，跨大版本升级时需要验证兼容性

方案2：基类注入ChangeDetectorRef模拟OnPush行为 #

不修改元数据，通过手动控制变更检测的触发时机模拟OnPush效果：

import { ChangeDetectorRef, HostListener, OnChanges, SimpleChanges } from '@angular/core';

export class Base implements OnChanges {
  constructor(protected cdr: ChangeDetectorRef) {
    // 脱离默认的自动变更检测
    this.cdr.detach();
  }

  // 输入属性变化时触发检测
  ngOnChanges(changes: SimpleChanges): void {
    this.cdr.detectChanges();
  }

  // 组件内部交互事件触发时检测，可根据业务补充更多事件类型
  @HostListener('click')
  @HostListener('input')
  @HostListener('change')
  handleUserEvent(): void {
    this.cdr.detectChanges();
  }

  // 对外暴露手动触发检测的方法，供子类异步操作后调用
  protected markForCheck(): void {
    this.cdr.detectChanges();
  }
}

• 优点：不依赖Angular内部逻辑，兼容性强，JIT/AOT模式均支持
• 缺点：属于模拟实现，需要手动覆盖所有触发变更的场景，异步操作（如接口请求返回）后需要手动调用markForCheck()触发更新

注意：如果有个别子类不需要使用OnPush策略，可在子类中单独覆盖配置，优先级高于基类的统一设置。

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