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

真的是超麻烦的...

Angular 学习笔记 ( CDK - Overlays )的更多相关文章

  1. Angular 学习笔记 ( CDK - Accessibility )

    @angular/ckd 是 ng 对于 ui 组建的基础架构. 是由 material 团队开发与维护的, 之所以会有 cdk 看样子是因为在开发 material 的时候随便抽象一个层次出来给大家 ...

  2. Angular 学习笔记 ( CDK - Portal )

    Portal 的主要使用场景是 dynamic component 动态的插入模板或组件. Portal 可分为 2 种. 进入和出去 (in or out) ComponentPortal, Tem ...

  3. Angular 学习笔记 (cdk focus monitor 和一些 focus tabindex 的基础)

    更新 : 2019-12-22 focusInitialElementWhenReady  我们经常会调用到这个方法, 它的逻辑是这样 先看有没有 cdkFocusInitial 有的就 focus ...

  4. Angular 学习笔记 ( CDK - Layout )

    简单说就是 js 的 media query. 1. BreakpointObserver  const layoutChanges = this.breakpointObserver.observe ...

  5. Angular 学习笔记 ( CDK - Observers )

    <div class="projected-content-wrapper" (cdkObserveContent)="projectContentChanged( ...

  6. angular学习笔记(三十一)-$location(2)

    之前已经介绍了$location服务的基本用法:angular学习笔记(三十一)-$location(1). 这篇是上一篇的进阶,介绍$location的配置,兼容各版本浏览器,等. *注意,这里介绍 ...

  7. angular学习笔记(三十一)-$location(1)

    本篇介绍angular中的$location服务的基本用法,下一篇介绍它的复杂的用法. $location服务的主要作用是用于获取当前url以及改变当前的url,并且存入历史记录. 一. 获取url的 ...

  8. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  9. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

随机推荐

  1. Python 常用命令

    对Python进行软件的安装.卸载和查看,是我们在日常工作中经常要做的事情,有的时候会突然忘记常用的命令,所以在此记录下来: pip 安装软件包 pip install xxx 卸载软件包 pip u ...

  2. Java最大公约数和最小公倍数的求法(辗转相除法)

    这道题计算了三个数的最小公倍数 import java.util.Scanner; public class D { public static int gcd(int a,int b) { int ...

  3. ISAPI和CGI限制中没有ASP.NET v4.0

    [服务器搭建]ISAPI和CGI限制中没有ASP.NET v4.0解决方式: 1.确保安装IIS时确实安装了ASP.NET,如果没有的话,勾上重新装一下,一般出现404.2时这么干 2.如果你是先装了 ...

  4. 【Unity3D与23种设计模式】中介者模式(Mediator)

    GoF中定义: 定义一个接口来封装一群对象的互动行为 中介者通过移除对象之间的引用 以减少他们之间的耦合度 并且能改变它们之间的互动独立性 游戏做的越大,系统划分的也就越多 如事件系统,关卡系统,信息 ...

  5. SpringBoot就是这么简单

    一.SpringBoot入门 今天在慕课网中看见了Spring Boot这么一个教程,这个Spring Boot作为JavaWeb的学习者肯定至少会听过,但我是不知道他是什么玩意. 只是大概了解过他是 ...

  6. Linux Centos 下安装软件 三种方式(转)

    Linux学习的路还很远呢,各位码农,新年快乐哈! 1)一种是软件的源代码,您需要自己动手编译它.这种软件安装包通常是用gzip压缩过的tar包(后缀为.tar.gz). 2)另一种是软件的可执行程序 ...

  7. curl/libcurl获取打开网页平均网速

    CURL: curl -o /dev/null -s -w %{http_code}:%{http_connect}:%{content_type}:%{time_namelookup}:%{time ...

  8. Javscript的函数链式调用基础篇

    我们都很熟悉jQuery了,只能jQuery中一种非常牛逼的写法叫链式操作: $('#div').css('background','#ccc').removeClass('box').stop(). ...

  9. 【Flask】 Jinja2模板语言

    Jinja2 Jinja2是Python Web编程中的主流模板语言.因为flask是基于Jinja2和Werkzeug发展而来,在安装flask的时候jinja2自动就被装在上面了. 之前提到了很多 ...

  10. 数据库 --> sqlite3总结

    Sqlite3总结 SQLite,是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库中. sqlite语句 #sqlite3 test.db //设置宽度为2sqlit ...