Angular6中CDK中的Overlay與Portals的簡介

Overlay 主要的做用是在頁面上顯示一個浮動的容器，好比經常使用的modal,select,notification

Overlay使用的關鍵在兩個地方：

• 位置策略：一個處理overlay的顯示位置

1. GlobalPositionStrategy: 當overlay的PositionStrategy設置成GlobalPositionStrategy的時候，overlay的位置是相對整個窗口而言的。
2. ConnectedPositionStrategy: 當overlay的位置須要依賴於另一個視圖的位置的時候採用該ConnectedPositionStrategy來肯定overlay的位置。可使用FlexibleConnectedPositionStrategy來代替
3. 可使用FlexibleConnectedPositionStrategy來代替： overlay的位置依賴於某個視圖的位置。

• 滑動策略：一個處理有滑動的時候overlay的動做。

1. NoopScrollStrategy: origin滾動的時候，overlay位置不動
2. CloseScrollStrategy: origin位置變更的時候，overlay會自動關掉
3. BlockScrollStrategy: origin的滾動也會消失掉
4. RepositionScrollStrategy: overlay會跟着origin位置的變更而變更

Portals模塊的功能就是將動態內容(能夠是Component也能夠是一個TemplateRef)顯示到引用程序中。Portal:表示內容。PortalOutlet: 放置內容的位置。

Portal的關鍵地方：

• ComponentPortal
• TemplatePortal
• PortalOutlet

如今經過一個在service中建立一個overlay做爲實例進行使用這些點，這裏以動態添加Component爲例

首先介紹一些接下來會用的ComponentRef：

表示經過ComponentFactory建立的組件的實例。 ComponentRef提供對組件實例的訪問以及與此組件實例相關的其餘對象，並容許您經過destroy方法銷燬組件實例。

所包含的屬性:

1. C
2. location : ElementRef 組件實例的宿主元素所在的位置
3. injector : Injector 組件實例存在的注射器
4. instance : C 組件實例 [這次主要用到這個屬性，能夠在service中調用該組件實例上的方法]
5. hostview : ViewRef 組件實例的宿主視圖ViewRef
6. changeDetectorRef : ChangeDetectorRef 組件的ChangeDetectorRef
7. componentType: Type 組件類型
8. destroy() : void 銷燬組件實例及其附加數據
9. onDestroy(callback: Function) : void 容許註冊將在組件銷燬時調用的回調

export testClass{
    // 首先在一個service中引入NotificationTestComponent，這個就是要經過引入此service會顯示的內容
    private _notificationTestRef: ComponentRef<NotificationTestComponent>;
    private _overlayRef: OverlayRef;
    
    // 調用 overlay.create() 會返回一個OverlayRef 實例. 這個實例用來處理具體的一個overlay
    // this._overlayRef 是一個 PortalOutlet- 一旦建立能夠經過attach Portal添加內容
    private _createNotificationTest(): void {
    this._overlayRef = this._overlay.create();
    this._notificationRef = this._overlayRef.attach(new ComponentPortal(NotificationComponent));
  }
}
複製代碼

結論： 這樣就能夠經過僅僅引入一個service來實現一個彈窗，而不須要在使用的地方引入這個組件。本次介紹的比較簡單，關於位置策略和滾動策略本次並無深刻講解，但願你們在使用一些簡單的overlay時，能夠起到一些小的做用~ 😝