angular 动态生成组件如何插入html 片段（类似ng-content的功能）

1.需求：有一个alertComponent组件，需要动态生成（使用viewChild ，ViewContainerRef ，componentFactoryResolver）组件，但是需要投影一段html到alertCompoment里面去。

 

问题分析：如果是使用标签实例化，直接使用ng-content就可以投影对应的内容进去了，例如：

这里的将会投影进alertComponent 对应的

可是动态生成要怎么解决呢？

思路分析：如果要你在运行的时候在组件上添加视图或者创建组件，这个你是不是知道怎么做

1.使用viewChild获取要添加视图的容器以及需要插入的template

2.使用viewContainerRef实例的createEmbeddedView方法创建视图

3.如果创建组件，先用componentFactoryResolver实例化组件，然后再使用viewContainerRef实例的createComponent方法创建组件

 

---------------分割线----------------------

入正题，你想在动态生成的组件插入html片段，是不是只要获取到这个组件的引用，然后获取组件内部的viewContainerRef实例的引用，然后就可以调用createEmbeddedView方法进行内容的插入，从而达到了投影的效果，代码如下：

//this.vc是组件即将要插入的容器viewContainerRef的实例

//this.cfr 是componentFactoryResolver的实例引用    alertComponent是动态生成的组件

//alertVc是alertComponent组件里面的ng-container占位符，用来放内容插入的

// this.template是要动态插入的html的应用

let alertComponent = this.vc.createComponent(this.cfr.resolveComponentFactory(alertComponent));

alertComponent.instance.alertVc.createEmbeddedView(this.template)

由于本人技术有限，如果有错的地方还望各位留言指出错误，或者有更好的实现方式也欢迎留言指正