如何使用AngularCDKPortal創(chuàng)建動(dòng)態(tài)內(nèi)容

this.componentPortal = new ComponentPortal(ExampleComponent);

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

@ViewChild('testTemplate') templatePortalContent: TemplateRef;

constructor(private _viewContainerRef: ViewContainerRef) { }

ngAfterViewInit() {
  this.templatePortal = new TemplatePortal(
    this.templatePortalContent,
    this._viewContainerRef
  );
}

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






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

原生DOM內(nèi)容

@ViewChild('domPortalContent') domPortalContent: ElementRef;
ngAfterViewInit() {
  this.domPortal = new DomPortal(this.domPortalContent);
}

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

插入容器

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

CdkPortOutlet

最簡(jiǎn)單的就是通過 CdkPortOutlet 指令了：

給 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(
  private viewContainerRef: ViewContainerRef,
  @Inject(DOCUMENT) private document: any,
  private injector: Injector,
  private componentFactoryResolver: ComponentFactoryResolver
) {
  // 在下創(chuàng)建外部宿主元素
  const container = 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 = new DomPortalOutlet(
    this.outsideContainer, 
    this.componentFactoryResolver, 
    this.appRef, 
    this.injector
  );
}

// 在應(yīng)用外部插入動(dòng)態(tài)組件。
openComponentPortalOutSideAngularContext(): void {
  const componentPortal = new ComponentPortal(AlertComponent);
  const componentRef = this.outsideOutlet.attach(componentPortal);
    componentRef.instance.closeAlert.subscribe(() => {
      this.outsideOutlet.detach();
    });
}

// 在應(yīng)用外部插入動(dòng)態(tài)模板。
openTemplatePortalInsideAngularContext(): void {
  const templatePortal = new TemplatePortal(this.templatePortalContent, this.viewContainerRef);
  this.outsideOutlet.attach(templatePortal);
}

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

const injectionToken = new InjectionToken('Sharing data with outside component portal');
const customInjector = Injector.create({ providers: [{ provide: CustomInjectionToken, useValue: 'test value' }] });

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

// 重點(diǎn)是第四個(gè)參數(shù)
new DomPortalOutlet(this.outsideContainer, this.componentFactoryResolver, this.appRef, customInjector);

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

constructor(@Inject(injectionToken) public customData: any) {}

給模板傳遞上下文就比較簡(jiǎn)單了，在創(chuàng)建 TemplatePortal 對(duì)象時(shí)，傳入上下文對(duì)象即可：

// 重點(diǎn)是第三個(gè)參數(shù)
new TemplatePortal(this.templatePortalContent, this.viewContainerRef, { customData:'test values' });

關(guān)于“如何使用Angular CDK Portal創(chuàng)建動(dòng)態(tài)內(nèi)容”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。