Angular CDK Overlay 弹出覆盖物

为什么使用Overlay?

Overlay中文翻译过来意思是覆盖物,它是Material Design components for Angular中针对弹出动态内容这一场景的封装,功能强大、使用方便,尤其在开发自己的组件库时,可以让你少写许多代码,可以说只要是弹出内容的场景基本都可以使用Overlay.
我们自己的组件库中弹出场景基本都已经使用Overlay,如自定义Select、Cascader、Tree Select、Tooltip、Dialog等,总结最重要的的两点好处:

  1. 让使用者不再进行繁琐的位置计算,而简单通过参数配置就实现内容的定位,而且关于位置的各种情况都有考虑到.
  2. 组件的弹出内容都是用Overlay实现,避免了各自实现的产生的不兼容,如相互遮盖问题.

简单示例 – 连结位置源的弹出

下面通过一个示例代码来展示Overlay的使用,这种弹出场景类似于Tooltip,弹出的overlay内容是基于一个参照的位置源origin元素.

安装并且导入模块

项目中如果没有安装CDK,要先安装

  npm install @angular/cdk
导入OverlayModule
import {OverlayModule} from '@angular/cdk/overlay';

@NgModule({
  imports: [
    OverlayModule,
    // ...
  ]
})
export class AppModule {
}
示例模板内容
<div class="demo-trigger">
  <!--触发位置源-->
  <button mat-raised-button
      cdkOverlayOrigin
      type="button"
      [disabled]="overlayRef"
      (click)="openWithConfig()">Open</button>
</div>

<!--弹出动态内容模板-->
<ng-template #overlay>
  <div class="demo-overlay">
    <div style="overflow: auto;">
      <ul><li *ngFor="let item of itemArray; index as i">{{itemText}} {{i}}</li></ul>
    </div>
  </div>
</ng-template>

除了弹出模板,上面模板中还有一个Open按钮,后面要用到它作为位置源origin

注入Overlay服务

在组件的constructor构造函数中注入Overlay服务,下面代码包括组件的定义

@Component({
  selector: 'overlay-demo',
  templateUrl: 'connected-overlay-demo.html'
})
export class ConnectedOverlayDemo {
  @ViewChild(CdkOverlayOrigin, {static: false}) _overlayOrigin: CdkOverlayOrigin;
  @ViewChild('overlay', {static: false}) overlayTemplate: TemplateRef<any>;
  /**
   * 注入Overlay服务
   */
  constructor(
      public overlay: Overlay) { }  

  openWithConfig() {
  }
}

处理注入服务,上面代码还通过ViewChild取到模板中的两个对象,后面用到的时候再解释.

构建位置策略

首先创建一个位置策略,这里使用的是FlexibleConnectedPositionStrategy策略,先看代码

const positionStrategy = this.overlay.position()
        .flexibleConnectedTo(this._overlayOrigin.elementRef)
        .withPositions([
        {
          originX: 'start',
          originY: 'bottom',
          overlayX: 'start',
          overlayY: '较好',
        }
      ]);  

创建FlexibleConnectedPositionStrategy策略的方法flexibleConnectedTo必须要提供一个位置源参数,这里使用的是
this._overlayOrigin.elementRef,弹出内容的位置是基于这个位置源的,this._overlayOrigin其实就是通过ViewChild取的模板中的Open按钮.

调用创建方法
 this.overlayRef = this.overlay.create({
      positionStrategy, // 位置策略
      scrollStrategy: this.overlay.scrollStrategies.reposition(), // 滚动策略
      direction: this.dir.value, // 可用性方面的设置,不用太关注
      minWidth: 200, // overlay层的最小宽度
      minHeight: 50 // overlay层的最小高度
      hasBackdrop: false // 是否显示遮罩层
    }); 

方法会生成一个OverlayRef类型的对象overlayRef,用overlayRef来管理Overlay。

通过overlayRef附加模板

一切准备就绪后,这里就是需要告诉Overlay弹出层要显示的内容,直接弹出模板,在模板中定义,这里用到的是overlayRef的attach方法,代码如下

 this.overlayRef.attach(new TemplatePortal(this.overlayTemplate, this.viewContainerRef)); 

代码中用到了this.overlayTemplate,通过ViewChild取到的显示弹出内容的模板定义.

注:attach方法用到了CDK里面的Protals,attach方法接收的参数类型其实是TemplatePortal,因为这个说到底是动态创建组件,除此之外它还支持组件类型的ComponentPortal,关于Portals可以参考我前面的文章https://zhuanlan.zhihu.com/p/59719621

通过以上简单的几个步骤就实现动态内容的弹出,效果图如下所示

屏幕录制 2019-06-11 下午10.30.13.2019-06-11 22_38_52.gif

简单示例 – 全局弹出

与上面的完全不同,现在介绍下通过Overlay直接弹出内容在窗口上,不连结任何位置源,非常简单只需要更改下位置策略,看下使用的新位置策略的代码

 const positionStrategy = this.overlay.position()
      .global()
      .height('300px')
      .centerHorizontally()
      .较好('70px'); 

调用global()返回的是全局的位置策略GlobalPositionStrategy,基于浏览器窗口绝对定位的位置策略。
以上代码实现:水平居中,距离顶部70px,效果图如下

屏幕录制 2019-06-11 下午10.44.31.2019-06-11 22_47_32.gif

Overlay 位置策略

Overlay通过OverlayPositionBuilder服务提供了三个方法分别对应三种位置策略,OverlayPositionBuilder通过构造函数注入到了Overlay服务中,前面代码this.overlay.position()返回的就是OverlayPositionBuilder类型的对象

ConnectedPositionStrategy – 连结点位置策略

注:该策略已被弃用,使用FlexibleConnectedPositionStrategy策略代替,但是这里的讨论可以继续,用以说明连接点的位置关系

connectedTo方法返回ConnectedPositionStrategy策略实例,该策略实现基于一个操作源上的位置点到Overlay弹出层的位置点连接关系的位置策略,创建策略的代码如下

  connectedTo(
      elementRef: ElementRef,
      originPos: OriginConnectionPosition,
      overlayPos: OverlayConnectionPosition): ConnectedPositionStrategy {
    return new ConnectedPositionStrategy(
        originPos, overlayPos, elementRef, this._viewportRuler, this._document, this._platform,
        this._overlayContainer);
  } 

参数分别是:

  1. elementRef要连接的元素,一般是触发弹出的元素
  2. originPos 连接元素的位置点
  3. overlayPos overlay的位置点

用图表达它所维系的位置关系

image.png

上图所示的位置点组合只是其中一种情况(左下点 – 左上点),位置配置代码如下

 {
  "originX": "start",
  "originY": "bottom",
  "overlayX": "start",
  "overlayY": "较好"
} 

在x方向上可枚举值定义如下

 export type HorizontalConnectionPos = 'start' | 'center' | 'end'; 

在y方向上可枚举值定义

 export type VerticalConnectionPos = '较好' | 'center' | 'bottom'; 

基于以上枚举值可以实现各种位置组合。

FlexibleConnectedPositionStrategy – 灵活的连接点位置策略

注:现在的源代码ConnectedPositionStrategy策略最终也是通过关联FlexibleConnectedPositionStrategy策略实现的,所以推荐直接使用该策略

通过flexibleConnectedTo方法返回FlexibleConnectedPositionStrategy策略实例,这是Overlay最复杂的一个位置策略,所以能称上Flexible,通过指令方式使用Overlay时就是使用的这个策略,它在位置策略上有更多的控制,特性如下:

  1. withDefaultOffsetXwithDefaultOffsetY设置相对基础位置的偏移。
  2. withPositions参数为ConnectionPositionPair类型的数组,提供多种位置组合,当某一种位置组合的弹出内容超出窗口,就会应用对应其它的位置组合来避免内容不可见。
  3. withFlexibleDimensions 控制Overlay弹出层宽度和高度是否被限制在浏览器窗口内,参数设置为ture时,宽度和高度会自适应到浏览器边界,以滚动条形式展现内容。
  4. 等等位置方面其它可预见的细节的处理

创建策略的代码如下

   /**
   * Creates a flexible position strategy.
   * @param origin Origin relative to which to position the overlay.
   */
  flexibleConnectedTo(origin: FlexibleConnectedPositionStrategyOrigin):
    FlexibleConnectedPositionStrategy {
    return new FlexibleConnectedPositionStrategy(origin, this._viewportRuler, this._document,
        this._platform, this._overlayContainer);
  } 

只有一个origin参数,提供了要连结的位置源元素引用。

GlobalPositionStrategy

全局位置策略,global方法返回GlobalPositionStrategy策略实例,无任何参数,创建策略的代码如下

  /**
   * Creates a global position strategy.
   */
  global(): GlobalPositionStrategy {
    return new GlobalPositionStrategy();
  }

GlobalPositionStrategy提供了全局定位的各种方法,并且可以通过链式的方式调用,如下代码

const strategy = this.overlay
  .position()
  .global()
  .width('500px')
  .height('100px')
  .centerHorizontally()
  .centerVertically();

还有较好leftbottomright方法提供各个方位的绝对定位,参数是在这个方位上的偏移值,如居上10px参数就是'10px',这是这个偏移值会打破水平或者垂直方向上的居中。

PositionStrategy 位置策略接口

位置策略接口定义如下

 import {OverlayReference} from '../overlay-reference';

/** Strategy for setting the position on an overlay. */
export interface PositionStrategy {
  /** 附加位置策略到overlay */
  attach(overlayRef: OverlayReference): void;

  /** 更新overlay element 元素的位置. */
  apply(): void;

  /** 当overlay调用detach时调用 */
  detach?(): void;

  /** Cleans up any DOM modifications made by the position strategy, if necessary. */
  dispose(): void;
}

接口定义了位置策略必须包含的方法签名,这是面向对象编程中的常用的抽象方式。
OverlayRef在实现时只依赖PositionStrategy接口而不具体依赖某一个策略的实现,在创建OverlayRef需要提供一个具体的位置策略的实例(一般是在创建Overlay时配置),如果有需要还可以实现自己的位置策略,实现自己的位置策略只需要实现这个接口并且定义接口签名的具体实现。
符合面向对象的三大特性 封装继承多态,符合五大原则中的单一职责原则开放封闭原则,这种抽象思想非常值得学习

滚动策略

Overlay提供了全局服务ScrollStrategyOptions ,用它提供处理overlay滚动时的处理策略。

NoopScrollStrategy – 不提供任何处理

在滚动不做任何事情,调用scrollStrategiesnoop方法

  noop = () => new NoopScrollStrategy(); 
CloseScrollStrategy – 关闭滚动策略

一旦用户有滚动行为,立即关闭overlay弹层,调用scrollStrategiesclose方法

  close = (config?: CloseScrollStrategyConfig) => new CloseScrollStrategy(this._scrollDispatcher,
      this._ngZone, this._viewportRuler, config) 

可以配置config中的参数threshold,设置一个滚动像素的临界点,只有当滚动距离大于此参数时才会关闭overlay.

BlockScrollStrategy – 阻止滚动策略

该策略会阻止页面级的滚动,调用scrollStrategiesblock方法

   block = () => new BlockScrollStrategy(this._viewportRuler, this._document); 

通过给页面的html标签增加样式cdk-global-scrollblock来阻止页面级别的滚动,样式定义如下

position: fixed;
width: 100%;
overflow-y: scroll; 

RepositionScrollStrategy – 重定位滚动策略

一旦用户有滚动行为,该策略会根据滚动的位置更新弹出层的位置,效果就是弹出层会跟随滚动而滚动,相对于位置源的位置不变,调用scrollStrategiesreposition方法

   reposition = (config?: RepositionScrollStrategyConfig) => new RepositionScrollStrategy(
      this._scrollDispatcher, this._viewportRuler, this._ngZone, config) 

config可以配置两个参数,scrollThrottle参数控制滚动事件触发重新更新位置的抖动频率,autoClose参数配置当滚动事件发生时是否关闭overlay弹层(实现 关闭滚动策略 的功能)

滚动的触发

无论是关闭Overlay还是更新Overlay位置,都需要检测滚动事件的触发,这里要用到CDK提供的处理滚动的服务(cdk/scrolling目录下),主要用到ScrollDispatcher,一个处理全局滚动事件的触发器.
关闭滚动策略 和 重定位滚动策略 都是订阅ScrollDispatcher的scrolled方法返回的流(后面统一叫scrolled流),有几点要明确

  1. 全局页面文档的滚动定会触发scrolled流
  2. overlay是否显示backdrop(遮罩层)对 重定位滚动策略 有影响,显示backdrop会阻止页面局部元素的滚动,对全局页面文档滚动没有影响,所以可以看到的效果是,官方的overlay示例即使显示backdrop层,reposition仍然起作用,但自己在实现overlay跟随滚动的时候可能会失败,因为根本触发不了局部滚动事件。
  3. scrolled流是一个全局的滚动监听,任何注入的CdkScrollable所关联的元素滚动都会触发scrolled流(如果滚动跟overlay没有关系,那重新计算位置也没有影响,计算后还是原来的位置,不过这块感觉有待优化)
实现局部元素滚动Overlay层重定位

因为国内的软件大部分是把整个窗口固定,然后再通过局部元素设置样式overflow:scroll实现内容滚动,这里仅提供思路

  1. 关闭backdrop,至于点击backdrop后overlay关闭,就需自己实现了
  2. 根据滚动区域构造CdkScrollable示例,可以用代码遍历origin元素的可滚动父元素

这块理解起来并没有那么容易,很抽象,又是由overlay 、scroll、position策略、scroll策略组合起来的,现在可以先做了解,需要了解细节时再翻看源代码。

总结

文字首先介绍了使用Overlay的好处,以及在我们的组件库中都有那些组件使用了Overlay,然后通过简单的示例代码带大家了解Overlay的使用,后面又介绍了Overlay的位置策略和滚动策略,希望看到最后的各位有些帮助。
Overlay需要说的内容非常的多,而且整体封装的思想也很值得学习,这里就简单介绍这么多,有任何建议或者疑问欢迎留言讨论。
另外文中的示例基本是在Material Design Components for angular 中针对Overlay的Demo,有需要可以自行clone代码学习

示例运行命令
git clone https://github.com/angular/components
cd components
yarn install // 如果提示没有yarn 需要全局装下yarn,node版本要求10.x
npm run dev-app

文章标题:Angular CDK Overlay 弹出覆盖物,发布者:刘佳,转载请注明出处:https://worktile.com/kb/p/6511

(1)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
刘佳刘佳站长
上一篇 2022年3月20日 上午1:17
下一篇 2022年3月20日 上午1:21

相关推荐

  • 项目全过程管理有哪些方法

    方法有:一、项目管理计划;二、项目范围管理;三、项目进度管理;四、项目成本管理;五、项目质量管理;六、项目资源管理;七、项目风险管理;八、项目沟通管理。项目管理计划是项目管理的基础。项目管理计划是一个包括所有项目管理活动的文件。 一、项目管理计划 项目管理计划是项目管理的基础。项目管理计划是一个包括…

    2023年4月30日
    11400
  • Java为什么不支持多继承

    这是因为为了降低复杂度和简化语言,java 中不支持多重继承。考虑一个场景,其中 A、B 和 C 是三个类。C 类继承 A 和 B 类。如果 A 类和 B 类有相同的方法,并且你从子类对象中调用它,那么调用 A 类或 B 类的方法就会有歧义。

    2023年1月30日
    92300
  • 国内有哪些非开源的SaaS团队协作平台、项目管理工具

    国内非开源的SaaS团队协作平台、项目管理工具有:1、Worktile;2、PingCode;3、Asana;4、Wrike;5、Jira。Worktile 是国内的一款老牌通用项目管理系统,具有非常高的功能成熟度,是一款非常适合中小企业的项目管理系统。 一、Worktile Worktile 是国…

    2023年4月29日
    11100
  • 先进制造业包括什么行业

    先进制造业 涵盖了运用高科技和自动化技术实现产品创新和生产过程优化的行业群体。具体而言,先进制造业包含了 1、航空航天、2、汽车制造、3、精密工程、4、医疗设备、5、机器人技术、6、电子产品、7、新材料、8、制药行业、9、清洁技术和可再生能源、10、信息技术与通讯 等。这些行业聚焦于工艺流程、材料科…

    2023年11月30日
    7500
  • app前端和web前端有啥区别

    app前端和web前端的区别有:1、运行环境不同;2、开发工具和语言不同;3、交互体验不同;4、更新方式不同;5、兼容性问题不同;6、访问资源权限不同。其中,运行环境不同指的是,app前端主要在移动设备上的原生环境中运行,而web前端则在浏览器中运行。 1、运行环境不同 app前端:主要运行在iOS…

    2023年7月30日
    17800
  • 产品经理用的原型工具有哪些

    产品经理用的原型工具有:1、摹客RP;2、Axure RP;3、sketch;4、Xmind。其中,摹客RP是一款永久免费的原型设计工具。摹客还提供了丰富的组件,拖拽即可使用,相比于Axure需要自己去一步步搜索下载组件包的方式,使用摹客RP画图的效率会高很多。 一、摹客RP 一款永久免费的原型设计…

    2023年4月20日
    32100
  • 计算机视觉领域与成像领域的超分辨率有什么区别

    计算机视觉领域与成像领域的超分辨率的区别有:1、计算机视觉领域的超分辨率,在计算机视觉领域,超分辨率是指通过图像处理算法和技术,将低分辨率图像提升到高分辨率的过程;2、成像领域的超分辨率,成像领域的超分辨率主要涉及到光学系统和成像传感器的设计。 一、计算机视觉领域的超分辨率 在计算机视觉领域,超分辨…

    2023年7月30日
    8300
  • c语言ascii码表

    ASCII码是一种字符编码方案,用于表示文本文件中的字符。本文将详细介绍ASCII码表和C语言中如何使用它,分为两个主要部分:1、ASCII码表概述;2、C语言中ASCII码的使用。了解ASCII码表和如何在C语言中使用它有助于更好地理解字符表示和字符操作。 1、ASCII码表概述 ASCII码(美…

    2023年8月14日
    22800
  • 项目管理的未来趋势与变革

    随着业界的不断进步,项目管理的未来趋势与变革将涉及多个关键领域:1、灵活性与敏捷性增强、2、远程与分布式团队、3、人工智能与机器学习的应用、4、重视软技能与领导力、5、综合方法论的采用、6、可持续性和社会影响考量。这些变革为项目管理领域带来新的挑战与机遇。灵活性和敏捷性的增强意味着对传统项目管理方法…

    2023年11月30日
    2600
  • 工期计划表用什么软件做

    工期计划表可以用这些软件做:1、Microsoft Project;2、Primavera P6;3、GanttProject;4、Excel;5、Smartsheet;6、Trello;7、Asana;8、Wrike;9、Monday.com等。Microsoft Project是一款功能强大的项…

    2023年4月8日
    38700

发表回复

登录后才能评论
站长微信
站长微信
电话联系

400-800-1024

工作日9:30-21:00在线

分享本页
返回顶部