[Angular Material完全攻略] Day 29 | angular cdk material
接下來我們要介紹AngularCDK中的Portal分類,透過這裡面的功能,我們可以很容易的動態切換各種不同的元件和templates,讓動態產生內容不再是件麻煩的事情!其實在Angular中,我們已經能夠使用
接下來我們要介紹Angular CDK中的Portal分類,透過這裡面的功能,我們可以很容易的動態切換各種不同的元件和templates,讓動態產生內容不再是件麻煩的事情!
其實在Angular中,我們已經能夠使用<ng-container>搭配ngTemplateOutlet或ngComponentOutlet來切換不同的template或component了,而Angular CDK的Portal可以想像成是它的簡單好用加強版!甚至我們可以透過Portals裡面的功能,把元件放在整個Angular程式的控制範圍之外,但元件依然還在Angular的控制內,非常的強大!
就讓我們繼續往下看吧!!
開始使用Angualr CDK的PortalAngular CDK中的Portal類別中提供了一些方便的directives和services,用來產生動態的內容,使用前要先加入PortalModule:
import { PortalModule } from @angular/cdk/portal; @NgModule({ exports: [ PortalModule ] }) export class SharedMaterialModule {} 基本知識在使用Portal相關功能之前,有兩個簡單名詞要先介紹:
Portal:真正要被切換的內容,這些內容會用Portal包起來,如果要切換的內容是一個template reference,則會使用TemplatePortal;如果是元件(component),則使用ComponentPortal。 PortalOutlet:實際放置內容的地方,如果Portal是插頭,那麼PortalOutlet就可以想像成是插座。接著我們來實作一個簡單的Tab功能,說明Portal如何動態切換內容!
使用cdkPortalOutlet我們先設計好要放置插座的地方,也就是PortalOutlet,這裡我們設計了一個如下的畫面
<div class="portal-dem...