先前介紹過原生 API 的動態視圖插入,功能上已經可以滿足大多數使用場景。不過也有一些缺憾,還沒有解決在 Angular 應用程式外插入內容的需求,指令也不能跟動態插入的元件有輸入輸出的互動。
好在Angular 官方提供了一套組件開發套件Component Dev Kit (CDK),作為各種Angular 組件開發的基礎工具,其中就提供“Portal(傳送門)” 來輔助動態視圖的創建。
這個 」動態視圖「可以是元件、TemplateRef 或 DOM 元素,分別對應三種 Portal 類型(ComponentPortal、TemplatePortal、DomPortal)。它們三個的抽象泛型基底類別是Portal
,有三個方法:attach(掛載到容器)、detach(從容器移除)、isAttached(判斷視圖是否為掛載狀態)。
而容器也是由一個抽象類別BasePortalOutlet
定義,和視圖類似,包含attach(給容器掛載視圖)、detach(從容器移除視圖)、dispose(銷毀容器) 、isAttached(是否有掛載視圖)。它的主要實作是DomPortalOutlet
類別。用以掛載三種類型的動態視圖。
先來看看三種動態視圖的建立。
ComponentPortal
比較原生API,要建立一個動態元件非常的簡單,只要要把元件類別傳入ComponentPortal
建構子即可。
this.componentPortal = new ComponentPortal(ExampleComponent);
可以傳入任意自訂的元件類,用以建立ComponentPortal
對象,再動態插入視圖中。
✨注意:Angular 9 後的版本建議使用Ivy 編譯器,如果是舊版編譯器,傳入的元件類,需要在Module 的entryComponents
中聲明,並且這個Module不能懶加載。
TemplatePortal
TemplatePortal 的構建,相較於元件,多了一個參數(ViewContainerRef)。看過前一篇應該對它非常熟悉了,需要依賴它呼叫createEmbeddedView()
來建立嵌入視圖。這裡透過建構注入,直接使用目前元件的ViewContainerRef
實例。
一些需要动态插入的内容.
@ViewChild('testTemplate') templatePortalContent: TemplateRef; constructor(private _viewContainerRef: ViewContainerRef) { } ngAfterViewInit() { this.templatePortal = new TemplatePortal( this.templatePortalContent, this._viewContainerRef ); }
除了透過建構函數,TemplatePortal 也有一個指令(CdkPortal)可以方便建立。
一些需要动态插入的内容.
一些需要动态插入的内容.
然後透過@ViewChild
就可以獲得TemplatePortal
的實例了。
DomPortal
就像上面的範例透過@ViewChild
取得Template 實例來創建,類似的也可以獲得ElementRef 來建立動態的DOM。
原生DOM内容
@ViewChild('domPortalContent') domPortalContent: ElementRef; ngAfterViewInit() { this.domPortal = new DomPortal(this.domPortalContent); }
可以動態的將這段 DOM 轉移到任意位置。要注意的是,轉移之後,原來的資料綁定,或者綁定的指令可能不會再繼續更新。
前面三種類型的 Portal 都說了可以渲染到任何位置,那要具體怎麼渲染呢?
CdkPortOutlet
最簡單的就是透過CdkPortOutlet 指令了:
給#anyPortal
傳值上面三個中任意的Portal 實例,都會動態渲染到目前位置。
和原生 API 的指令不同,它可以自動判斷是什麼類型的 Portal。另外,它還有個額外的事件:attached
,透過這個事件,可以取得到掛載的元件實例,或是 TemplateRef。這也讓和掛載組件的互動變得十分方便了。
建構容器實例
不過既然說了是可以渲染到任意位置,那自然也包括Angular 應用外部,要渲染到應用之外,就需要咱們透過建構函式創建容器實例。
這個容器類別就是DomPortalOutlet
,它是PortalOutlet
的實作子類別。它的建構參數主要是:Element(掛載視圖的DOM節點)、ComponentFactoryResolver(和上篇一樣,用以動態建構元件)、appRef(目前Angular 應用的整體實例)、Injector(注入器,用於傳遞依賴)。
constructor( private viewContainerRef: ViewContainerRef, @Inject(DOCUMENT) private document: any, private injector: Injector, private componentFactoryResolver: ComponentFactoryResolver ) { // 在下创建外部宿主元素 const container = this.document.createElement('div'); container.classList.add('outside-portal-container'); this.outsideContainer = this.document.body.appendChild(container); // 获取应用实例 this.appRef = this.injector.get(ApplicationRef); // 创建外部容器 this.outsideOutlet = new DomPortalOutlet( this.outsideContainer, this.componentFactoryResolver, this.appRef, this.injector ); } // 在应用外部插入动态组件。 openComponentPortalOutSideAngularContext(): void { const componentPortal = new ComponentPortal(AlertComponent); const componentRef = this.outsideOutlet.attach(componentPortal); componentRef.instance.closeAlert.subscribe(() => { this.outsideOutlet.detach(); }); } // 在应用外部插入动态模板。 openTemplatePortalInsideAngularContext(): void { const templatePortal = new TemplatePortal(this.templatePortalContent, this.viewContainerRef); this.outsideOutlet.attach(templatePortal); }
除了掛載視圖到應用程式外的 DOM 元素中,還需要能夠跟視圖進行資料交互,元件可以透過注入依賴,模板可以傳入上下文物件。
const injectionToken = new InjectionToken('Sharing data with outside component portal'); const customInjector = Injector.create({ providers: [{ provide: CustomInjectionToken, useValue: 'test value' }] });
對建立outsideContainer 的程式碼稍作修改,把這個customInjector 作為參數傳入(而不是使用目前元件的injector)
// 重点是第四个参数 new DomPortalOutlet(this.outsideContainer, this.componentFactoryResolver, this.appRef, customInjector);
對應的,這個元件只需要按這個injectionToken 注入依賴即可:
constructor(@Inject(injectionToken) public customData: any) {}
傳遞上下文給範本就比較簡單了,在建立TemplatePortal 物件時,傳入上下文物件即可:
// 重点是第三个参数 new TemplatePortal(this.templatePortalContent, this.viewContainerRef, { customData:'test values' });
和插入到外部的視圖資料互動的能力;
#更便捷和靈活的指令。
有了它,創建動態的元件容器,或是彈跳窗,浮動選單,甚至是建立一個低程式碼設計平台,都變得更加容易了。
專案原始碼:https://github.com/locotor/angular-dynamic-view-example
線上範例:https://coding-pages-bucket-1575455- 8137703-14801-541995-1303365836.cos-website.ap-beijing.myqcloud.com/
更多程式相關知識,請造訪:程式設計入門! !
以上是手把手教你使用Angular CDK Portal創建動態內容的詳細內容。更多資訊請關注PHP中文網其他相關文章!