Angular中生成独立动态组件的实现与相关疑问

1. ComponentFactoryResolver已废弃，是否仍可使用？ #

ComponentFactoryResolver确实已在Angular 13+标记为废弃，当前版本虽能正常运行，但不建议继续使用——Angular官方会逐步移除废弃API，后续版本可能出现兼容性问题。新API写法更简洁，无需手动处理组件工厂，应尽快迁移到新方案。

2. 用新API创建独立组件，如何获取hostView/关联DOM元素？ #

Angular 14+的独立组件，推荐使用createComponent（从@angular/core导入）创建动态组件，它会直接返回ComponentRef实例。你依然可以通过componentRef.hostView访问视图，或通过componentRef.location.nativeElement获取组件对应的DOM元素，完全支持replaceWith操作。

创建独立组件的示例代码：

import { createComponent, ApplicationRef, Injector, Type, ComponentRef } from '@angular/core';
// ...
create(componentType: Type<ReplacementComponent>): ComponentRef<ReplacementComponent> {
  const componentRef = createComponent(componentType, {
    injector: this._injector
  });
  this._appRef.attachView(componentRef.hostView);
  // 后续逻辑保持原有组件管理逻辑即可
  return componentRef;
}

之后可直接用DOM元素完成替换：

const targetCanvas = document.getElementById('your-canvas');
const componentRef = dynamicComponentGenerator.create(MyReplacementComponent);
targetCanvas?.replaceWith(componentRef.location.nativeElement);

3. 更优的实现方式 #

基于新API，我们可以优化服务的健壮性与易用性：

• 支持直接传入目标DOM元素，在create方法内完成替换，简化调用流程
• 使用DestroyRef自动监听组件销毁，避免手动管理组件Map时出现遗漏
• 移除冗余的componentType instanceof ComponentRef判断（新API下无需处理该场景）

优化后的服务示例：

import { ApplicationRef, ComponentRef, Injectable, Injector, Type, DestroyRef } from "@angular/core";
import { ReplacementComponent } from "xxx";

@Injectable({ providedIn: "root" })
export class DynamicComponentGenerator {
  private _components = new Map<string, ComponentRef<ReplacementComponent>>();
  private _currentKey = 0;

  constructor(
    private _appRef: ApplicationRef,
    private _injector: Injector,
    private _destroyRef: DestroyRef
  ) {}

  create(
    componentType: Type<ReplacementComponent>,
    targetElement?: Element
  ): ComponentRef<ReplacementComponent> {
    const componentRef = createComponent(componentType, {
      injector: this._injector
    });
    const key = `${this._currentKey++}`;
    componentRef.instance.key = key;
    this._components.set(key, componentRef);

    // 挂载组件到应用视图
    this._appRef.attachView(componentRef.hostView);

    // 传入目标元素时直接完成替换
    targetElement?.replaceWith(componentRef.location.nativeElement);

    // 自动监听组件销毁，清理资源
    this._destroyRef.onDestroy(() => {
      this._appRef.detachView(componentRef.hostView);
      this._components.delete(key);
    });

    return componentRef;
  }

  remove(componentKey: string): void {
    const componentRef = this._components.get(componentKey);
    componentRef?.destroy();
  }

  clear(): void {
    Array.from(this._components.values()).forEach(ref => ref.destroy());
    this._components.clear();
    this._currentKey = 0;
  }
}

调用时可直接传入Canvas元素一步完成替换：

const targetCanvas = document.querySelector('canvas');
dynamicComponentGenerator.create(MyReplacementComponent, targetCanvas);

该实现自动处理组件销毁后的资源清理，避免内存泄漏，同时简化了外部调用逻辑。

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