组件视图销毁后调用detectChanges报错，detach视图仍无效求解决

针对你遇到的问题——组件视图销毁后Promise才resolve，导致调用detectChanges抛出ViewDestroyedError，同时你还需要保留Promise内的计算/状态保存逻辑，这里有几个可靠的解决方案：

方案1：手动维护组件活跃状态标志 #

这是兼容所有Angular版本的通用方案，通过一个布尔值跟踪组件是否还处于活跃状态，在Promise回调中先检查这个标志，再执行视图相关操作：

import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
import _ from 'lodash';

export class TabComponent implements OnInit, OnDestroy {
  // 标记组件是否处于活跃状态
  private isComponentAlive = true;

  constructor(private cd: ChangeDetectorRef, private service: YourService) {}

  ngOnInit() {
    const promises: Promise<any>[] = [];
    _.each(types, (type:string) => { 
      promises.push(this.service.getResultsBy(type)) 
    });
    
    Promise.all(promises)
      .then((data) => {
        // 先执行你的计算/状态保存逻辑（即使组件销毁也要完成的部分）
        this.processDataAndSaveState(data);

        // 检查组件是否还活跃，再执行视图变更检测
        if (!this.isComponentAlive) return;
        this.cd.detectChanges();
      });
  }

  ngOnDestroy() {
    // 组件销毁时标记为非活跃
    this.isComponentAlive = false;
    this.cd.detach();
  }

  private processDataAndSaveState(data: any[]) {
    // 这里写你的计算、状态保存逻辑，不受组件销毁影响
  }
}

这个方案的核心是把必须完成的业务逻辑和依赖视图的变更检测逻辑分离，确保业务逻辑无论组件状态如何都能执行，而视图操作仅在组件活跃时触发。

方案2：利用Angular 16+的ChangeDetectorRef.destroyed属性 #

如果你的项目使用Angular 16及以上版本，可以直接使用ChangeDetectorRef提供的destroyed只读属性，它会自动跟踪变更检测器的销毁状态，无需手动维护标志：

import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
import _ from 'lodash';

export class TabComponent implements OnInit, OnDestroy {

  constructor(private cd: ChangeDetectorRef, private service: YourService) {}

  ngOnInit() {
    const promises: Promise<any>[] = [];
    _.each(types, (type:string) => { 
      promises.push(this.service.getResultsBy(type)) 
    });
    
    Promise.all(promises)
      .then((data) => {
        // 先完成业务逻辑
        this.processDataAndSaveState(data);

        // 直接判断变更检测器是否已销毁
        if (this.cd.destroyed) return;
        this.cd.detectChanges();
      });
  }

  ngOnDestroy() {
    this.cd.detach();
    // Angular会自动将destroyed属性设为true，无需手动操作
  }

  private processDataAndSaveState(data: any[]) {
    // 你的计算/状态保存逻辑
  }
}

这个方案更简洁，依赖Angular内置的状态跟踪，减少手动代码的出错概率。

方案3：用Promise.race处理异步操作的"终止信号" #

如果想要更优雅地处理组件销毁时的异步回调，可以创建一个"销毁信号"Promise，通过Promise.race让回调在组件销毁时提前终止视图操作，同时不影响原Promise的执行：

import { Component, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
import _ from 'lodash';

export class TabComponent implements OnInit, OnDestroy {
  // 创建一个用于标记组件销毁的Promise
  private destroySignal = new Promise<void>((resolve) => {
    this.resolveDestroySignal = resolve;
  });
  private resolveDestroySignal!: () => void;

  constructor(private cd: ChangeDetectorRef, private service: YourService) {}

  ngOnInit() {
    const promises: Promise<any>[] = [];
    _.each(types, (type:string) => { 
      promises.push(this.service.getResultsBy(type)) 
    });
    
    const dataPromise = Promise.all(promises);
    // 用race让销毁信号优先于数据Promise触发
    Promise.race([dataPromise, this.destroySignal])
      .then((result) => {
        // 如果结果是undefined，说明是销毁信号触发的，跳过视图操作
        if (result === undefined) return;

        // 否则处理数据并执行变更检测
        const data = result as any[];
        this.processDataAndSaveState(data);
        this.cd.detectChanges();
      });

    // 注意：原dataPromise会继续执行，不会因为race而被终止，业务逻辑不受影响
  }

  ngOnDestroy() {
    // 触发销毁信号
    this.resolveDestroySignal();
    this.cd.detach();
  }

  private processDataAndSaveState(data: any[]) {
    // 你的计算/状态保存逻辑
  }
}

这个方案的优势是把组件销毁的信号和异步操作解耦，代码结构更清晰，适合复杂的异步场景。

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