Angular变更检测卡顿求助：大数组组件受跨组件检测影响

首先得明确问题的核心：即使给组件A设置了ChangeDetectionStrategy.OnPush，ngDoCheck钩子依然会在全局或父级组件触发的变更检测周期中被调用——而你在组件B的mousemove回调里调用的detectChanges()，如果触发了父级组件的变更检测（比如组件B和A共享同一个父组件），就会连带触发组件A的ngDoCheck，嵌套*ngFor的大数组会让这个过程变得极慢。

要让Angular完全忽略组件A，唯一彻底的办法是手动将组件A的变更检测器从Angular的变更检测树中分离出来，具体步骤如下：

1. 在组件A中分离变更检测器 #

在组件A的构造函数中注入ChangeDetectorRef，然后在初始化完成后调用detach()方法，彻底切断它和Angular自动变更检测流程的关联：

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

@Component({
  selector: 'app-component-a',
  templateUrl: './component-a.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class ComponentAComponent implements OnInit {
  largeArray: any[]; // 你的大数组

  constructor(private cdr: ChangeDetectorRef) { }

  ngOnInit(): void {
    // 初始化你的大数组
    this.largeArray = [...];
    // 从变更检测树中分离，Angular将不再自动处理该组件的任何变更检测
    this.cdr.detach();
  }

  // 手动控制组件A的UI更新时机
  triggerComponentAUpdate(): void {
    // 仅在你确认大数组需要更新时，手动触发一次变更检测
    this.cdr.detectChanges();
    
    // 如果你只是临时更新后想再次脱离，也可以这样写：
    // this.cdr.reattach();
    // this.cdr.detectChanges();
    // this.cdr.detach();
  }
}

2. 为什么这个方案有效？ #

• detach()方法会让组件A完全脱离Angular的变更检测树，任何全局或局部的自动变更检测（包括组件B触发的detectChanges()）都不会再触及它，ngDoCheck钩子也不会被执行，从根源上解决了mousemove时的卡顿问题。
• 相比OnPush，detach是更彻底的“手动控制”——OnPush只是限制了自动触发变更检测的条件，但依然会参与变更检测周期并执行ngDoCheck；而detach是直接让组件从变更检测流程中消失，只有你手动调用detectChanges()时才会更新UI。

注意事项 #

• 一旦调用detach()，组件A的所有UI更新都必须通过triggerComponentAUpdate()这类手动方法触发，所以要确保在大数组确实发生变化时才调用它。
• 如果组件A有子组件，分离组件A的变更检测器也会连带切断子组件的自动变更检测，若子组件需要独立更新，可在子组件中单独注入ChangeDetectorRef进行操作。

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