本文探讨了在Angular中如何动态生成组件并将其与HTML片段结合，类似于ng-content的功能。通过使用ViewChild, ViewContainerRef和componentFactoryResolver，作者分析了在运行时添加视图或创建组件的方法。解决方案包括获取组件的引用，利用viewContainerRef的createEmbeddedView方法插入HTML内容，从而达到投影效果。最后，给出了具体的代码示例。"
115895668,10296382,Dolphin PHP框架SQL注入漏洞分析与利用,"['PHP框架漏洞', 'SQL注入', '代码审计']
1.需求：有一个alertComponent组件，需要动态生成（使用viewChild ，ViewContainerRef ，componentFactoryResolver）组件，但是需要投影一段html到alertCompoment里面去。
问题分析：如果是使用标签实例化，直接使用ng-content就可以投影对应的内容进去了，例如：
<alert-Compoment>
<div class="info">这里的将会投影进alertComponent 对应的 <ng-content selecter=".info"></ng-content></div>
</alert-Compoment>
可是动态生成要怎么解决呢？
思路分析：如果要你在运行的时候在组件上添加视图或者创建组件，这个你是不是知道怎么做
1.使用viewChild获取要添加视图的容器以及需要插入的template
2.使用viewContainerRef实例的createEmbeddedView方法创建视图
3.如果创建组件，先用componentFactoryResolver实例化组件，然后再使用viewContainerRef实例的createComponent方法创建组件
---------------分割线----------------------
入正题，你想在动态生成的组件插入html片段，是不是只要获取到这个组件的引用，然后获取组件内部的viewContainerRef实例的引用，然后就可以调用createEmbeddedView方法进行内容的插入，从而达到了投影的效果，代码如下：
//this.vc是组件即将要插入的容器viewContainerRef的实例
//this.cfr 是componentFactoryResolver的实例引用 alertComponent是动态生成的组件
最低0.47元/天 解锁文章
扫一扫
1141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
