Angular动态加载组件无宿主标签且保留生命周期的实现方案

我在Angular开发中，通过ViewContainerRef.createComponent()在Drop事件里动态加载组件模板，功能正常但组件会自带宿主包装标签。我想去掉这个宿主标签，最初尝试在组件内用ViewContainerRef.createEmbeddedView()实现了需求，但不确定方案是否合理。后来更新实现方式后，发现组件的ngOnInit、ngAfterViewInit等生命周期钩子，以及@HostListener()、@HostBinding()全部失效，只有指令类里的相关功能正常。现在需要可行方案，实现动态创建无宿主标签的EmbeddedView，同时保留组件的生命周期钩子及相关宿主装饰器功能。

相关代码示例 #

dynamic-component.directive.ts #

import { ComponentFactoryResolver, ComponentRef, Directive, Injector, Input, OnInit, Type, ViewContainerRef } from '@angular/core';
import { ContainerComponent } from 'src/app/components/elements/simple-container/container.component';
import { LabelComponent } from 'src/app/components/elements/label/label.component';

export type ElementType = 'LabelComponent' | 'ContainerComponent';

@Directive({
  selector: '[appDynamicComponent]',
})
export class DynamicComponentDirective implements OnInit {

  elementType: ElementType | undefined;

  appComponents: { [key in ElementType]: Type<any> } = {
    'LabelComponent': LabelComponent,
    'ContainerComponent': ContainerComponent,
  };


  @Input('type')
  set elemType(type: ElementType) {
    this.elementType = type;
  }

  componentRef: undefined | ComponentRef<any>;

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

  ngOnInit(): void {
    this.loadComponent();
  }

  loadComponent() {
    if (this.elementType) {
      const componentElemType = this.appComponents[this.elementType];
      const componentFactory = this.componentFactoryResolver.resolveComponentFactory(componentElemType);
      if (componentFactory) {
        this.componentRef = componentFactory.create(this.injector); // create component.
        // this.componentRef = this.viewContainerRef.createComponent(componentFactory); // create component & inserts its host view into this container

        if (this.componentRef.instance.childComponentTemplate) {
          this.viewContainerRef.createEmbeddedView(this.componentRef.instance.childComponentTemplate);
        }
      }
    }
  }
}

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