快捷導(dǎo)航

Angular通過指令動態(tài)添加組件問題

更新時間：2018年07月09日 11:52:10 作者：Shapeying

這篇文章主要介紹了Angular通過指令動態(tài)添加組件問題,文中通過寫一個小組件來簡單總結(jié)下，需要的朋友可以參考下

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

創(chuàng)建組件

　　場景：鼠標(biāo)移動到圖標(biāo)上時，展示解釋性的說明文字。那就需要創(chuàng)建一個普通的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;
 }
}

　　非常簡單的一個組件，tipText來接收需要展示的文字。

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

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

　　那entryComponents這個配置項是做什么的呢？看源碼注釋，大概意思就是：Angular會為此配置項中的組件創(chuàng)建一個ComponentFactory，并存放在ComponentFactoryResolver中。動態(tài)添加組件時，需要用到組件工廠，所以此配置是必不可少的。

創(chuàng)建指令

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

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
 ) {
 // 獲取對應(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ù)
 this.hovertip.instance.tipText = this.tipText;
 }
　
　// 綁定鼠標(biāo)移出時的事件
 @HostListener('mouseleave') onmouseleave() {
 if (this.hovertip) {
　　// 組件銷毀
 this.hovertip.destroy();
 }
 }
}

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

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

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

使用

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