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

2019-11-19 13:31:40

字體：大中小

供稿：網(wǎng)友

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

創(chuàng)建組件

　　場景：鼠標移動到圖標上時，展示解釋性的說明文字。那就需要創(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)建指令

　　通過指令為目標元素綁定事件，控制創(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 ) { // 獲取對應的組件工廠 this.factory = this.resolver.resolveComponentFactory(HovertipComponent); } @Input('appHovertip') tipText: string;　 // 綁定鼠標移入的事件 @HostListener('mouseenter') onmouseenter() {　　 // 清空所有的view 　　 this.viewContainer.clear(); // 創(chuàng)建組件 this.hovertip = this.viewContainer.createComponent(this.factory); // 向組件實例傳遞參數(shù) this.hovertip.instance.tipText = this.tipText; }　　// 綁定鼠標移出時的事件 @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)聽鼠標移入事件，在觸發(fā)事件時，通過ViewContainerRef類來創(chuàng)建組件，存下返回的組件componentRef（獲取實例，銷毀組件時需要用到），向組件實例傳遞tipText。監(jiān)聽鼠標移出事件，在事件觸發(fā)時，銷毀組件。

使用

　　在目標元素是綁定指令，同時傳遞tipText即可。