如何查询Angular组件实际使用的ChangeDetectionStrategy策略？

首先先纠正一个常见误区：Angular的变更检测策略不会从父组件继承，就算外层组件配置了OnPush，所有子组件未显式声明的情况下，默认都是Default策略，这也是你给子组件额外配置OnPush后性能明显提升的核心原因。

常用查询方法 #

• 方法1：通过Angular DevTools可视化查看（最推荐）
  安装Angular官方DevTools浏览器插件后，打开浏览器控制台的「Components」标签，选中你要查询的组件，右侧属性面板中可以直接看到changeDetectionStrategy的实际值：0对应Default，1对应OnPush。
• 方法2：代码中动态获取
  可以通过组件实例的内部属性直接读取，示例代码如下：

  // 第一种：在组件内部注入ChangeDetectorRef读取
  import { ChangeDetectorRef, Component } from '@angular/core';
  
  @Component({...})
  export class DemoComponent {
    constructor(private cd: ChangeDetectorRef) {
      // 输出0为Default，1为OnPush
      console.log((this.cd as any)._lView[1].changeDetection);
    }
  }
  
  // 第二种：通过ViewChild获取子组件实例读取
  @ViewChild(ChildComponent) child!: ChildComponent;
  ngAfterViewInit() {
    // 输出0为Default，1为OnPush
    console.log(this.child.ɵcmp.changeDetection);
  }
  

• 方法3：全局排查辅助指令
  如果你需要批量排查项目中所有组件的策略，可以写一个全局挂载的属性指令，自动打印每个组件的策略：

  @Directive({
    selector: '[cdStrategyLog]',
    standalone: true
  })
  export class CdStrategyLogDirective {
    constructor(cd: ChangeDetectorRef, element: ElementRef) {
      const strategy = (cd as any)._lView[1].changeDetection === 1 ? 'OnPush' : 'Default';
      console.log(`组件${element.nativeElement.tagName.toLowerCase()}的变更检测策略：${strategy}`);
    }
  }
  

你测试的性能差异对应截图如下：

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