Angular-将多个组件动态插入动态创建的DOM节点中

Question

我想使用Renderer2创建一个DIV元素，然后将两个或多个组件插入其中。

import { HelloComponent } from './hello.component';

constructor(
    public renderer: Renderer2,
    public cfr: ComponentFactoryResolver,
    public elementRef: ElementRef,
    private injector: Injector,
    private applicationRef: ApplicationRef
    ) { }

ngOnInit() {    

  const newNode = this.renderer.createElement('div');
  this.renderer.appendChild(this.elementRef.nativeElement, newNode);

  let componentFactory = this.cfr.resolveComponentFactory(HelloComponent);
  let componentRef = componentFactory.create(this.injector, [], newNode);

  this.applicationRef.attachView(componentRef.hostView);

  componentRef.instance.name = "Component 1";

}

此代码可以在DIV中创建一个组件“ HelloComponent”，但是我找不到在同一个DIV中添加另一个组件的方法。 如果我用不同的变量重复代码，则第二个组件将是唯一包含在DIV中的组件。

Stackblitz上的代码