码迷,mamicode.com
首页 > 其他好文 > 详细

Angular 学习笔记 ( CDK - Overlays )

时间:2018-01-22 00:01:06      阅读:1474      评论:0      收藏:0      [点我收藏+]

标签:tps   state   设置   重点   学习笔记   它的   ram   关闭   component   

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 

真的是超麻烦的...

 

Angular 学习笔记 ( CDK - Overlays )

标签:tps   state   设置   重点   学习笔记   它的   ram   关闭   component   

原文地址:https://www.cnblogs.com/keatkeat/p/8325867.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!