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
真的是超麻烦的...