Angular 學習筆記 ( CDK - Overlays )

更新 : 2019-07-03

https://netbasal.com/creating-powerful-components-with-angular-cdk-2cef53d81cea

 

更新 : 2018-01-30 

ng 的 overlap 在關閉的時候對 backdrop 作了一個 style pointer 

目的是讓 backdrop 不被 2 次點擊, 可是呢,  css pointerEvent 'none' 也有一個穿透的效果，就是說, backdrop 還沒徹底關上時, 其後面的按鈕是能夠被點擊到的. 

這個須要注意，由於可能你並不想這樣。 

另一個要說的是, overlap 是能夠打開多個的. 經過多個 overlapRef 去自行作管理. 因此請把 overlapRef 收好. 

 

 

https://blog.thoughtram.io/angular/2017/11/20/custom-overlays-with-angulars-cdk.html

https://blog.thoughtram.io/angular/2017/11/27/custom-overlays-with-angulars-cdk-part-two.html

這 2 篇已經教的很清楚了. 

ng overlays 是經過 service + dynamic component or template 來實現的

dynamic component 和 template (outlet) 如何使用以前有講過了.

ng overlays 惟一一個我以爲須要提別注意的地方是它的關閉

若是你直接調用 displose 的話，element 會立刻被刪除, 體驗可能不是很好。

若是要加個 animation 並不容易。

<ng-overlay-div>

　　<背景>

　　<ng-frame>

　　　　<咱們的 dynamic component>

　　</ng-frame>

</ng-overlay-div>

overlay 的結構大概是這樣的 ng 在 displose 的時候會洗掉 frame and 背景, 重點是它沒有調用 animation child 運行.

因此即便咱們寫 animation 在 dynamic component 也不會觸發

依據上面的教程或者看 material dialog 的實現源碼的話，你會發現要作 animation 要反過來作.

意思是，你經過設置 aniamation state = 'leave' 而後監聽 aniamtion end event 而後才調用 displose 去洗掉 element 

真的是超麻煩的...