Angular中如何将动态组件插入innerHTML渲染元素的子节点中间？

现有Angular项目中，通过[innerHTML]渲染API返回的HTML内容，基础结构如下：

<div [innerHTML]="contentFromAPI | safeHTML"></div>

渲染后目标div包含10个<p>子节点，需求是将自定义动态组件DynamicElement插入到这些子节点的中间位置（第5位）。

尝试实现的代码如下：
HTML文件：

<div [innerHTML]="contentFromAPI | safeHTML" #articleContent></div>

TS文件：

@ViewChild('articleContent', { read: ViewContainerRef })
private articleContent!: ViewContainerRef;

ngOnChanges(){
 if(ads){
   this.addElementToTemplate();
 }
}

private addElementToTemplate() {
setTimeout(() => {
      const childrenLength =
        this.articleContent.element.nativeElement.children.length;
        this.articleContent.createComponent(DynamicElement,{index: Math.ceil(childrenLength/2)});
    }, 3000);
}

但最终动态组件被添加为目标div的兄弟节点，而非内部子节点，结果结构如下：

<div>
     <p></p>
     <p></p>
     <p></p>
     <p></p>
     <p></p>
     <p></p>
     <p></p>
     <p></p>
     <p></p>
     <p></p>
</div>
<dynamic-element></dynamic-element>

核心问题在于ViewContainerRef的作用逻辑：它会将动态组件插入到关联元素的同级位置，而非元素内部。要实现将组件插入到目标div的子节点中间，需要通过原生DOM API操作动态组件的宿主元素，具体步骤如下：

1. 修改ViewChild获取方式：获取目标div的ElementRef而非ViewContainerRef，用于直接操作原生DOM。
2. 创建动态组件并获取宿主元素：通过组件工厂创建动态组件实例，提取其对应的原生DOM元素。
3. 插入到指定位置：使用原生DOM的insertBefore方法，将动态组件元素插入到目标div的子节点列表中指定索引位置。

修改后的代码示例：

import { Component, ElementRef, ViewChild, ComponentFactoryResolver, Injector, OnChanges } from '@angular/core';
import { DynamicElement } from './dynamic-element.component';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnChanges {
  @ViewChild('articleContent', { static: false }) 
  private articleContent!: ElementRef<HTMLDivElement>;
  ads: boolean = true;

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

  ngOnChanges() {
    if (this.ads) {
      this.addDynamicComponent();
    }
  }

  private addDynamicComponent() {
    // 等待innerHTML渲染完成（实际项目中可使用MutationObserver替代setTimeout，更可靠）
    setTimeout(() => {
      const targetDiv = this.articleContent.nativeElement;
      const childNodes = Array.from(targetDiv.children);
      const insertIndex = Math.floor(childNodes.length / 2); // 计算中间位置索引

      // 创建动态组件实例
      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicElement);
      const componentRef = componentFactory.create(this.injector);
      const dynamicComponentEl = componentRef.location.nativeElement;

      // 插入到目标位置
      if (childNodes[insertIndex]) {
        targetDiv.insertBefore(dynamicComponentEl, childNodes[insertIndex]);
      } else {
        targetDiv.appendChild(dynamicComponentEl);
      }

      // 注意：需在组件销毁时手动销毁动态组件，避免内存泄漏
      // 可将componentRef存入数组，在ngOnDestroy中遍历调用destroy()
    }, 0);
  }
}

HTML保持不变：

<div [innerHTML]="contentFromAPI | safeHTML" #articleContent></div>

• 若使用Angular 13+版本，也可通过ViewContainerRef.createComponent创建组件，但需先在目标div内部插入<ng-container>作为锚点，不过这种方式对innerHTML渲染的内容兼容性较差，不如原生DOM操作直接。
• 替代setTimeout的方案：使用MutationObserver监听目标div的子节点变化，当innerHTML渲染完成后再执行插入操作，避免依赖固定延迟。

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