如何销毁Angular动态创建组件中通过编程方式注入的服务？

在Angular中通过手动创建Injector给动态组件注入额外服务时，默认确实不会随动态组件销毁自动触发服务的ngOnDestroy钩子，下面是两种可落地的解决方法：

方案1：使用Angular 14+ 自带的EnvironmentInjector（推荐） #

Angular 14之后官方推出的EnvironmentInjector原生支持销毁逻辑，调用其destroy()方法时会自动触发所有已实例化服务的ngOnDestroy钩子，不需要额外封装。

实现代码 #

import { EnvironmentInjector, ViewContainerRef, ComponentFactory, ComponentRef } from '@angular/core';

constructor(
  private environmentInjector: EnvironmentInjector,
  private viewContainerRef: ViewContainerRef
) {}

// 动态创建组件逻辑
loadDynamicComponent(factory: ComponentFactory<YourComponent>) {
  // 创建支持销毁的注入器，注册额外服务
  const customInjector = this.environmentInjector.create([
    { provide: AdditionalService, useClass: AdditionalService }
  ]);

  // 传入注入器创建动态组件
  const componentRef = this.viewContainerRef.createComponent(factory, {
    injector: customInjector
  });

  // 保存注入器引用，后续销毁用
  return { componentRef, customInjector };
}

// 销毁逻辑
destroyDynamicComponent(refs: { componentRef: ComponentRef<unknown>, customInjector: EnvironmentInjector }) {
  // 先销毁组件，再销毁注入器
  refs.componentRef.destroy();
  refs.customInjector.destroy();
}

方案2：Angular 14以下版本的手动封装方案 #

如果是低版本Angular，可以通过自定义销毁辅助服务的方式手动管理服务生命周期：

步骤1：实现销毁辅助服务 #

import { Injectable, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable()
export class DynamicInjectorDestroyService implements OnDestroy {
  private readonly destroy$ = new Subject<void>();
  // 存储所有需要触发ngOnDestroy的服务实例
  private readonly registeredServices: OnDestroy[] = [];

  ngOnDestroy(): void {
    // 触发销毁信号
    this.destroy$.next();
    this.destroy$.complete();
    // 遍历调用所有已注册服务的销毁钩子
    this.registeredServices.forEach(service => {
      if (typeof service.ngOnDestroy === 'function') {
        service.ngOnDestroy();
      }
    });
  }

  // 注册需要管理生命周期的服务
  registerService(service: OnDestroy): void {
    this.registeredServices.push(service);
  }

  // 供RxJS流绑定销毁的信号
  get destroySignal() {
    return this.destroy$.asObservable();
  }
}

步骤2：创建注入器时注册辅助服务 #

const injector = Injector.create({
  providers: [
    DynamicInjectorDestroyService,
    { provide: AdditionalService, useClass: AdditionalService }
  ],
  parent: parentInjector
});

步骤3：在需要管理的服务中注册自身 #

@Injectable()
export class AdditionalService implements OnDestroy {
  constructor(
    private destroyService: DynamicInjectorDestroyService
  ) {
    // 注册到销毁服务
    this.destroyService.registerService(this);
  }

  ngOnDestroy() {
    // 你的清理逻辑，会自动被触发
  }
}

步骤4：销毁组件时触发清理 #

// 销毁时先销毁组件，再触发销毁服务的钩子
componentRef.destroy();
injector.get(DynamicInjectorDestroyService).ngOnDestroy();

注意事项 #

• 销毁顺序必须是先销毁动态组件，再销毁注入器/销毁服务，避免组件销毁过程中需要调用服务逻辑时报错
• 如果服务不需要在多个动态组件间共享，优先在动态组件的@Component()的providers数组中声明服务，Angular会自动管理其生命周期，不需要额外处理。

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