之前自己寫(xiě)的公共組件，都是會(huì)先引入，需要調(diào)起的時(shí)候再通過(guò)service控制公共組件狀態(tài)、值、回調(diào)函數(shù)什么的。但是有一些場(chǎng)景不適合這種方式，還是動(dòng)態(tài)添加組件更加好。通過(guò)寫(xiě)過(guò)的一個(gè)小組件來(lái)總結(jié)下。

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶(hù)創(chuàng)新互聯(lián)還提供了?？得赓M(fèi)建站歡迎大家使用！

創(chuàng)建組件

場(chǎng)景：鼠標(biāo)移動(dòng)到圖標(biāo)上時(shí)，展示解釋性的說(shuō)明文字。那就需要?jiǎng)?chuàng)建一個(gè)普通的tooltip組件。如下：

<aside class="hover-tip-wrapper">
 <span>{{tipText}}</span>
</aside>

import { Component, OnInit } from '@angular/core';
@Component({
 selector: 'app-hovertip',
 templateUrl: './hovertip.component.html',
 styleUrls: ['./hovertip.component.scss']
})
export class HovertipComponent implements OnInit {
 public tipText: string;
 constructor() { }
 ngOnInit() {
 }
}

.hover-tip-wrapper{
 width: max-content;
 position: absolute;
 height: 30px;
 line-height: 30px;
 bottom: calc(100% + 5px);
 right: calc( -10px - 100%);
 background-color: rgba(#000000,.8);
 padding: 0 5px;
 border-radius: 3px;
 &::after{
 content: '';
 position: absolute;
 height: 0;
 width: 0;
 border: 4px solid transparent;
 border-top-color: rgba(#000000,.8);
 left: 10px;
 top: 100%;
 }
 span {
 color: #ccc;
 font-size: 12px;
 }
}

非常簡(jiǎn)單的一個(gè)組件，tipText來(lái)接收需要展示的文字。

需要注意的是，聲明組件的時(shí)候，除了需要添加到declarations中外，還記得要添加到entryComponents中。

entryComponents: [HovertipComponent],
declarations: [HovertipComponent, HovertipDirective]

那entryComponents這個(gè)配置項(xiàng)是做什么的呢？看源碼注釋?zhuān)蟾乓馑季褪牵篈ngular會(huì)為此配置項(xiàng)中的組件創(chuàng)建一個(gè)ComponentFactory，并存放在ComponentFactoryResolver中。動(dòng)態(tài)添加組件時(shí)，需要用到組件工廠，所以此配置是必不可少的。

創(chuàng)建指令

通過(guò)指令為目標(biāo)元素綁定事件，控制創(chuàng)建組件、傳遞tipText以及組件的銷(xiāo)毀。

import { Input , Directive , ViewContainerRef , ComponentRef, ComponentFactory, HostListener , ComponentFactoryResolver} from '@angular/core';
import { HovertipComponent } from './hovertip.component';
@Directive({
 selector: '[appHovertip]'
})
export class HovertipDirective {
 public hovertip: ComponentRef<HovertipComponent>;
 public factory: ComponentFactory<HovertipComponent>;
 constructor(
 private viewContainer: ViewContainerRef,
 private resolver: ComponentFactoryResolver
 ) {
 // 獲取對(duì)應(yīng)的組件工廠
 this.factory = this.resolver.resolveComponentFactory(HovertipComponent);
 }
 @Input('appHovertip') tipText: string;
　
 // 綁定鼠標(biāo)移入的事件
 @HostListener('mouseenter') onmouseenter() {
　　 // 清空所有的view 
　　 this.viewContainer.clear();
 // 創(chuàng)建組件
 this.hovertip = this.viewContainer.createComponent(this.factory);
 // 向組件實(shí)例傳遞參數(shù)
 this.hovertip.instance.tipText = this.tipText;
 }
　
　// 綁定鼠標(biāo)移出時(shí)的事件
 @HostListener('mouseleave') onmouseleave() {
 if (this.hovertip) {
　　// 組件銷(xiāo)毀
 this.hovertip.destroy();
 }
 }
}

通過(guò)ViewContainerRef類(lèi)來(lái)管理視圖，這里用到了創(chuàng)建組件。這個(gè) 專(zhuān)欄 解釋的挺清楚的。這里用到了以下兩個(gè)API，清除和創(chuàng)建。

createComponent方法接受ComponentFactoty類(lèi)，創(chuàng)建后返回的ComponentRef類(lèi)，可以獲取到組件實(shí)例（instance），控制組件銷(xiāo)毀。

大致思路是這樣的，先獲取到了HovertipComponent組件對(duì)于的componentFactory，監(jiān)聽(tīng)鼠標(biāo)移入事件，在觸發(fā)事件時(shí)，通過(guò)ViewContainerRef類(lèi)來(lái)創(chuàng)建組件，存下返回的組件componentRef（獲取實(shí)例，銷(xiāo)毀組件時(shí)需要用到），向組件實(shí)例傳遞tipText。監(jiān)聽(tīng)鼠標(biāo)移出事件，在事件觸發(fā)時(shí)，銷(xiāo)毀組件。

使用

在目標(biāo)元素是綁定指令，同時(shí)傳遞tipText即可。

可以正常的創(chuàng)建和銷(xiāo)毀。

總結(jié)

開(kāi)始做的時(shí)候，主要是對(duì)這幾個(gè)類(lèi)比較懵，ViewContainerRef、ComponentRef、ComponentFactory、ComponentFactoryResolver等，看看源碼，查查資料，總會(huì)梳理清楚的。

參考資料：

https://www.jb51.net/article/114683.htm

https://www.jb51.net/article/112123.htm

當(dāng)前名稱(chēng)：Angular通過(guò)指令動(dòng)態(tài)添加組件問(wèn)題
網(wǎng)頁(yè)地址：http://jinyejixie.com/article18/ijghdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供手機(jī)網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、云服務(wù)器、微信公眾號(hào)、用戶(hù)體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)