手把手教你使用Angular CDK Portal創(chuàng)建動(dòng)態(tài)內(nèi)容

第手把手教你使用AngularCDKPortal創(chuàng)建動(dòng)態(tài)內(nèi)容之前介紹過原生API的動(dòng)態(tài)視圖插入，功能上已經(jīng)可以滿足大多數(shù)使用場(chǎng)景。不過也有一些缺憾，還沒有解決在Angular應(yīng)用外插入內(nèi)容的需求，指令也不能跟動(dòng)態(tài)插入的組件有輸入輸出的交互。

好在Angular官方提供了一套組件開發(fā)套件ComponentDevKit(CDK)，作為各種Angular組件開發(fā)的基礎(chǔ)工具，其中就提供Portal（傳送門）來輔助動(dòng)態(tài)視圖的創(chuàng)建。

這個(gè)動(dòng)態(tài)視圖可以是組件、TemplateRef或者DOM元素，分別對(duì)應(yīng)三種Portal類型（ComponentPortal、TemplatePortal、DomPortal）。它們?nèi)齻€(gè)的抽象泛型基類是PortalT，有三個(gè)方法：attach（掛載到容器）、detach（從容器移除）、isAttached（判斷視圖是否是掛載狀態(tài)）。

而容器也是由一個(gè)抽象類BasePortalOutlet定義，和視圖類似，包含attach（給容器掛載視圖）、detach（從容器移除視圖）、dispose（銷毀容器）、isAttached（是否有掛載視圖）。它的主要實(shí)現(xiàn)是DomPortalOutlet類。用以掛載三種類型的動(dòng)態(tài)視圖。

創(chuàng)建動(dòng)態(tài)內(nèi)容

先來看看三種動(dòng)態(tài)視圖的創(chuàng)建。

ComponentPortal

相比原生API，要?jiǎng)?chuàng)建一個(gè)動(dòng)態(tài)組件非常的簡單，只需要把組件類傳入ComponentPortal構(gòu)造函數(shù)即可。

ponentPortal=newComponentPortal(ExampleComponent);

可以傳入任意自定義的組件類，用以創(chuàng)建ComponentPortal對(duì)象，再動(dòng)態(tài)插入視圖中。

?注意：Angular9后的版本推薦使用Ivy編譯器，如果是老版本編譯器，傳入的組件類，需要在Module的entryComponents中聲明，并且這個(gè)Module不能懶加載。

TemplatePortal

TemplatePortal的構(gòu)建，相比組件，多了一個(gè)參數(shù)（ViewContAInerRef）?？催^前一篇應(yīng)該對(duì)它非常熟悉了，需要依賴它調(diào)用createEmbeddedView()來創(chuàng)建嵌入視圖。這里通過構(gòu)造注入，直接使用當(dāng)前組件的ViewContainerRef實(shí)例。

ng-template#testTemplate

p一些需要?jiǎng)討B(tài)插入的內(nèi)容./p

/ng-template

@ViewChild(testTemplate)templatePortalContent:TemplateRefany

constructor(private_viewContainerRef:ViewContainerRef){}

ngAfterViewInit(){

this.templatePortal=newTemplatePortal(

this.templatePortalContent,

this._viewContainerRef

}

除了通過構(gòu)造函數(shù)，TemplatePortal也有一個(gè)指令（CdkPortal）可以便捷創(chuàng)建。

ng-templatecdkPortal

p一些需要?jiǎng)討B(tài)插入的內(nèi)容./p

/ng-template

!--或?qū)懽?-

!--和上面寫法是一致的效果--

p*cdkPortal

一些需要?jiǎng)討B(tài)插入的內(nèi)容.

/p

然后通過@ViewChild就可以獲得TemplatePortal的實(shí)例了。

DomPortal

就像上面的示例通過@ViewChild獲取Template實(shí)例來創(chuàng)建，類似的也可以獲取ElementRef來創(chuàng)建動(dòng)態(tài)的DOM。

div#domPortalContentspan原生DOM內(nèi)容/span/div

@ViewChild(domPortalContent)domPortalContent:ElementRefHTMLElement

ngAfterViewInit(){

this.domPortal=newDomPortal(this.domPortalContent);

}

可以動(dòng)態(tài)的將這段DOM轉(zhuǎn)移到任意位置。要注意的是，轉(zhuǎn)移之后，原來的數(shù)據(jù)綁定，或者綁定的指令可能不會(huì)再繼續(xù)更新。

前面三種類型的Portal都說了可以渲染到任意位置，那具體怎么渲染呢？

CdkPortOutlet

最簡單的就是通過CdkPortOutlet指令了：

div

ng-template[cdkPortalOutlet]=anyPortal/ng-template

/div

給anyPortal傳值上面三個(gè)中任意的Portal實(shí)例，都會(huì)動(dòng)態(tài)渲染到當(dāng)前位置。

和原生API的指令不同，它可以自動(dòng)判斷是什么類型的Portal。另外，它還有個(gè)額外的事件：attached，通過這個(gè)事件，可以獲取到掛載的組件實(shí)例，或者TemplateRef。這也讓和掛載組件的交互變得十分方便了。

構(gòu)造容器實(shí)例

不過既然說了是可以渲染到任意位置，那自然也包括Angular應(yīng)用外部，要渲染到應(yīng)用之外，就需要咱們通過構(gòu)造函數(shù)創(chuàng)建容器實(shí)例。

這個(gè)容器類就是DomPortalOutlet，它是PortalOutlet的實(shí)現(xiàn)子類。它的構(gòu)造參數(shù)主要是：Element（掛載視圖的DOM節(jié)點(diǎn)）、ComponentFactoryResolver（和上篇一樣，用以動(dòng)態(tài)構(gòu)建組件）、appRef（當(dāng)前Angular應(yīng)用的整體實(shí)例）、Injector（注入器，用于傳遞依賴）。

constructor(

privateviewContainerRef:ViewContainerRef,

@Inject(DOCUMENT)privatedocument:any,

privateinjector:Injector,

privatecomponentFactoryResolver:ComponentFactoryResolver

//在body下創(chuàng)建外部宿主元素

constcontainer=this.document.createElement(div

container.classList.add(outside-portal-container

this.outsideContainer=this.document.body.appendChild(container);

//獲取應(yīng)用實(shí)例

this.appRef=this.injector.get(ApplicationRef);

//創(chuàng)建外部容器

this.outsideOutlet=newDomPortalOutlet(

this.outsideContainer,

ponentFactoryResolver,

this.appRef,

this.injector

//在應(yīng)用外部插入動(dòng)態(tài)組件。

openComponentPortalOutSideAngularContext():void{

constcomponentPortal=newComponentPortal(AlertComponent);

constcomponentRef=this.outsideOutlet.attach(componentPortal);

componentRef.instance.closeAlert.subscribe(()={

this.outsideOutlet.detach();

//在應(yīng)用外部插入動(dòng)態(tài)模板。

openTemplatePortalInsideAngularContext():void{

consttemplatePortal=newTemplatePortal(this.templatePortalContent,this.viewContainerRef);

this.outsideOutlet.attach(templatePortal);

}

除了掛載視圖到應(yīng)用外的DOM元素中，還需要能夠跟視圖進(jìn)行數(shù)據(jù)交互，組件可以通過注入依賴，模板可以傳入上下文對(duì)象。

constinjectionToken=newInjectionTokenany(Sharingdatawithoutsidecomponentportal

constcustomInjector=Injector.create({providers:[{provide:CustomInjectionToken,useValue:testvalue}]});

對(duì)創(chuàng)建outsideContainer的代碼稍作修改，把這個(gè)customInjector作為參數(shù)傳入（而不是使用當(dāng)前組件的injector）

//重點(diǎn)是第四個(gè)參數(shù)

newDomPortalOutlet(this.outsideContainer,ponentFactoryResolver,this.appRef,customInjector);

相應(yīng)的，這個(gè)組件只需要按這個(gè)injectionToken注入依賴即可：

constructor(@Inject(injectionToken)pu