Angular创建动态组件如何避免DOM中生成多余组件选择器标签

方案1：使用Angular 14+官方无宿主组件（最优解，无额外DOM操作开销） #

Angular 14 开始原生支持无宿主组件，仅需在子组件的 @Component 装饰器中添加 host: { ngNoHost: '' } 配置即可，创建组件时不会生成任何多余的宿主标签，完全符合需求：

@Component({
  selector: 'app-child',
  template: `<div>子组件内容</div>`,
  host: {
    ngNoHost: '' // 核心配置，不会生成宿主标签
  }
})
export class ChildComponent {}

配置完成后直接用原有 containerRef.createComponent 逻辑创建即可，不需要额外的节点移动、删除操作，性能为所有方案最高。

方案2：低版本Angular优化现有DOM操作逻辑 #

如果你使用的是Angular 13及更低版本，没有无宿主组件支持，可以优化现有节点移动逻辑。原有逻辑每次移动单个节点都会触发浏览器重排，是耗时过高的核心原因，改用 DocumentFragment 批量移动节点，仅触发一次重排，性能可提升10倍以上：

const parentElement = this.elementRef.nativeElement;
const parentNode = parentElement.parentNode;
const fragment = document.createDocumentFragment();

// 所有子节点先移入内存中的fragment，不会触发重排
while (parentElement.firstChild) {
  fragment.appendChild(parentElement.firstChild);
}
// 一次性插入所有节点，仅触发一次重排
parentNode.insertBefore(fragment, parentElement.nextSibling);
// 删除空的宿主标签
parentNode.removeChild(parentElement);

方案3：动态指定宿主节点（无需修改子组件） #

ViewContainerRef.createComponent 方法支持传入参数指定已有的宿主节点，你可以在要插入的位置提前创建占位节点，避免后续删除操作：

// 提前在插入位置创建注释占位节点，不会影响DOM结构和样式
const placeholder = document.createComment('child-component-placeholder');
containerRef.element.nativeElement.insertBefore(placeholder, containerRef.element.nativeElement.childNodes[index]);

// 创建组件时指定占位节点为宿主
const componentRef = containerRef.createComponent(ChildComponent, {
  index,
  rootSelectorOrNode: placeholder
});

不推荐方案：修改ComponentFactory源码补丁 #

你提到的修改create方法移除hostRNode相关逻辑的方案可以实现需求，但强依赖Angular内部实现，版本升级后大概率失效，维护成本极高，非必要不建议使用。

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