动态创建Angular组件时ngOnDestroy未触发的问题排查

问题出在你只完成了动态组件的创建和视图挂载，没有手动管理组件的销毁流程。Angular不会自动清理通过createComponent手动创建的组件引用，必须主动执行销毁操作才能触发ngOnDestroy。

具体修复步骤： #

1. 保存组件引用：将创建的ComponentRef作为类成员变量存储，避免局部变量被回收后无法访问
2. 在父组件销毁时主动清理动态组件：在父组件的ngOnDestroy中，先调用组件引用的destroy()方法，再从ApplicationRef上detach对应的视图

修改后的完整代码： #

import { Component, ElementRef, Injector, ViewChild, ApplicationRef, EnvironmentInjector, ComponentRef, OnDestroy } from '@angular/core';
import { FooComponent } from './foo/foo.component';

@Component({
  selector: 'app-root',
  template: `<div #container></div>`
})
export class AppComponent implements OnDestroy {
  @ViewChild('container') c: ElementRef;
  private fooComponentRef?: ComponentRef<FooComponent>;

  constructor(
    private appRef: ApplicationRef,
    private injector: Injector,
    private envInjector: EnvironmentInjector
  ) {}

  ngAfterViewInit() {
    this.fooComponentRef = createComponent(FooComponent, {
        environmentInjector: this.envInjector,
        elementInjector: this.injector,
        hostElement: this.c.nativeElement,
    });

    this.appRef.attachView(this.fooComponentRef.hostView);
  }

  ngOnDestroy() {
    if (this.fooComponentRef) {
      // 销毁组件，触发自身及嵌套组件的ngOnDestroy
      this.fooComponentRef.destroy();
      // 从应用视图中移除该组件的视图
      this.appRef.detachView(this.fooComponentRef.hostView);
    }
  }
}

关键说明： #

• ComponentRef.destroy()是触发组件生命周期销毁钩子的核心操作，它会递归销毁组件及其子组件
• 必须从ApplicationRef上detach视图，确保Angular的变更检测不再关注该组件，同时释放相关资源

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