Angular 学习笔记 ( CDK - Overlays )

更新 : 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

真的是超麻烦的...