Angular中ViewContainerRef.createComponent为何渲染在容器外？如何解决？

当你为普通DOM元素（如<div>）通过{read: ViewContainerRef}获取视图容器时，Angular的默认行为是将组件插入到该元素的相邻后方位置，而非元素内部。这是因为ViewContainerRef对于非模板类元素，会自动在元素外部创建插入区域，而非复用元素内部空间。

方案1：使用<ng-container>作为内部视图容器（推荐） #

修改模板，在目标<div>内部添加一个<ng-container>作为视图容器的载体：

<div>
  <ng-container #wrapper></ng-container>
</div>

TypeScript代码无需修改，保持原逻辑即可：

@ViewChild("wrapper", {read: ViewContainerRef}) wrapper: ViewContainerRef;

ngAfterViewInit() {
  this.wrapper.createComponent(SomeComponent);
}

<ng-container>是Angular的无渲染容器标签，不会生成额外DOM节点，组件会被直接插入到它的位置，也就是<div>内部。

方案2：手动将组件宿主元素插入DOM（旧方式） #

如果必须保留原<div #wrapper>的结构，可以通过ElementRef获取DOM元素，手动将组件的宿主节点添加到<div>内部：

import { ComponentFactoryResolver, ElementRef, Injector, ViewChild } from '@angular/core';

// ...

@ViewChild("wrapper") wrapper: ElementRef<HTMLDivElement>;

constructor(
  private cfr: ComponentFactoryResolver,
  private injector: Injector
) {}

ngAfterViewInit() {
  // 创建组件工厂与实例
  const componentFactory = this.cfr.resolveComponentFactory(SomeComponent);
  const componentRef = componentFactory.create(this.injector);
  
  // 将组件的宿主元素添加到div内部
  this.wrapper.nativeElement.appendChild(componentRef.location.nativeElement);
  
  // 触发变更检测确保组件渲染
  componentRef.changeDetectorRef.detectChanges();
}

注意：Angular 9+使用Ivy编译器时，无需在模块entryComponents中声明SomeComponent；若使用旧编译器则需要添加。此方式不符合Angular视图容器的设计规范，仅作为兼容场景备选。

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