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 

真的是超麻烦的...