之前自己写的公共组件,都是会先引入,需要调起的时候再通过服务控制公共组件状态,值,回调函数什么的。但是有一些场景不适合这种方式,还是动态添加组件更加好。通过写过的一个小组件来总结下。
场景:鼠标移动到图标上时,展示解释性的说明文字。那就需要创建一个普通的工具提示组件。如下:
& lt;除了类=癶over-tip-wrapper”比;
& lt; span> {{tipText}} & lt;/span>
& lt;/aside>
进口{组件,>
.hover-tip-wrapper {
宽度:max-content;
位置:绝对的;
高度:30 px;
行高:30 px;
底部:钙(100% + 5 px);
右:钙(-10 px - 100%);
background - color: rgba (# 000000。8);
填充:0 5 px;
border - radius: 3 px;
后,::{
内容:”;
位置:绝对的;
高度:0;
宽度:0;
边界:4 px固体透明;
border-top-color: rgba (# 000000。8);
左:10 px;
上图:100%;
}
跨度{
颜色:# ccc;
字体大小:12 px;
}
}
非常简单的一个组件,tipText来接收需要展示的文字。
需要注意的是,声明组件的时候,除了需要添加到声明中外,还记得要添加到entryComponents中。
entryComponents:(HovertipComponent),
声明:[HovertipComponent HovertipDirective]
那entryComponents这个配置项是做什么的呢?看源码注释,大概意思就是:角会为此配置项中的组件创建一个ComponentFactory,并存放在ComponentFactoryResolver中。动态添加组件时,需要用到组件工厂,所以此配置是必不可少的。
通过指令为目标元素绑定事件,控制创建组件,传递tipText以及组件的销毁。
进口{输入、指令ViewContainerRef、ComponentRef ComponentFactory, HostListener, ComponentFactoryResolver} ' @angular/核心”;
进口{HovertipComponent}”。/hovertip.component ';
@Directive ({
选择器:“[appHovertip]”
}）
出口类HovertipDirective {
公共hovertip: ComponentRef;
公共工厂:ComponentFactory;
构造函数(
私人viewContainer: ViewContainerRef,
私人解析器:ComponentFactoryResolver
){//获取对应的组件工厂
这一点。工厂=this.resolver.resolveComponentFactory (HovertipComponent);
}
@Input (appHovertip) tipText:字符串;//绑定鼠标移入的事件
@HostListener (mouseenter) alt="角通过指令动态添加组件问题">
createComponent方法接受ComponentFactoty类,创建后返回的ComponentRef类,可以获取到组件实例(实例),控制组件销毁。
大致思路是这样的,先获取到了HovertipComponent组件对于的componentFactory,监听鼠标移入事件,在触发事件时,通过ViewContainerRef类来创建组件,存下返回的组件componentRef(获取实例,销毁组件时需要用到),向组件实例传递tipText。监听鼠标移出事件,在事件触发时,销毁组件。
在目标元素是绑定指令,同时传递tipText即可。
可以正常的创建和销毁。
开始做的时候,主要是对这几个类比较懵,ViewContainerRef, ComponentRef, ComponentFactory, ComponentFactoryResolver等,看看源码,查查资料,总会梳理清楚的。
参考资料:
https://www.jb51.net/article/114683.htm
https://www.jb51.net/article/112123.htm
