angular动态添加自定义组件

1、需要定义一个标签标识为组件容器 #reportContainer

      <div id="report" #report>

        <div #reportContainer id="item">

        </div>

      </div>

2、导入ViewContainerRef ,并导入需要动态插入的组件XXComponent

import { Component,  ComponentFactoryResolver,  OnInit, ViewChild, ViewContainerRef } from '@angular/core';

3、在TS文件中使用 @ViewChild并将其类型定义为ViewContainerRef

  @ViewChild('reportContainer', { read: ViewContainerRef })

  reportContainer: ViewContainerRef|undefined;

4、在构造函数中注入ComponentFactoryResolver

　　constructor(public resolver:ComponentFactoryResolver) {   }

5、

　　　let com = this.resolver.resolveComponentFactory(XXComponent);

   　　 this.reportContainer?.createComponent(com);