Angular13中ComponentFactoryResolver弃用后，缺失rootSelectorOrNode的替代方案

核心思路 #

Angular 13+ 弃用 ComponentFactoryResolver 后，ViewContainerRef.createComponent 不再支持 rootSelectorOrNode 参数。要将动态生成的SVG rect元素绑定为组件宿主，需通过DOM替换的方式，把Angular默认生成的组件宿主元素替换为自定义的rect节点，同时保持组件逻辑的关联。

实现代码 #

import { ComponentRef, ElementRef, Renderer2, ViewContainerRef } from '@angular/core';
import { RectComponent } from './rect.component';
import { Shape } from './shape.interface';

public createRectComponent(representation: Shape<SVGRectElement>, viewContainerRef?: ViewContainerRef | null, vcrIndex?: number): ComponentRef<RectComponent> {
  // 生成或获取目标SVG rect元素
  const rectNode: SVGRectElement = representation.element || this.renderer.createElement('rect', 'http://www.w3.org/2000/svg') as SVGRectElement;
  representation.element = rectNode;

  viewContainerRef = viewContainerRef || this.artAccessVcr;

  // 创建RectComponent实例，直接指定插入位置
  const rectComponentRef = viewContainerRef!.createComponent(RectComponent, {
    injector: viewContainerRef!.injector,
    projectableNodes: [],
    index: vcrIndex
  });

  // 获取Angular默认生成的组件宿主元素（通常为<ng-component>）
  const defaultHost = rectComponentRef.location.nativeElement;

  // 用自定义rect节点替换默认宿主元素
  this.renderer.insertBefore(defaultHost.parentNode, rectNode, defaultHost);
  this.renderer.removeChild(defaultHost.parentNode, defaultHost);

  // 更新组件的宿主元素引用，确保变更检测、HostBinding等逻辑生效
  (rectComponentRef as any)._location = new ElementRef(rectNode);

  // 可选：将rect节点传入组件内部供使用
  rectComponentRef.instance.rectElement = rectNode;

  return rectComponentRef;
}

关键说明 #

1. Renderer2 DOM操作：必须用Angular的Renderer2而非原生DOM API操作节点，确保符合Angular的变更检测和跨平台规范。
2. 宿主元素替换：替换后，组件的@HostBinding、@HostListener等装饰器会自动作用于rect节点，保持原有的组件逻辑绑定。
3. 内部属性_location：由于Angular未提供公开API修改组件宿主，这里使用内部属性_location更新宿主引用，该属性在Angular 13+版本中稳定可用。
4. 直接指定插入位置：通过createComponent的index参数替代原代码中的viewContainerRef.insert，简化流程。

可选优化 #

如果RectComponent需要直接操作rect节点，可在组件内定义属性接收：

// rect.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-rect',
  template: '' // 模板为空，因为宿主是自定义rect节点
})
export class RectComponent {
  rectElement!: SVGRectElement;

  // 组件初始化后即可操作rectElement
  ngOnInit() {
    this.rectElement.setAttribute('width', '100');
    this.rectElement.setAttribute('height', '50');
  }
}

内容的提问来源于stack exchange，提问作者Bálint Réthy