游客您好
第三方账号登陆
  • 点击联系客服

    在线时间:8:00-16:00

    客服电话

    020-85534346

    电子邮件

    81058337@qq.com
  • 码云社APP

    随时掌握码云社动态

  • 扫描二维码

    关注砺锋微信公众号

Angular CDK Overlay 弹出覆盖物

发布时期:2019-7-8 11:04
阅读:792 回复:0

为什么使用Overlay?Overlay中文翻译过来意思是覆盖物,它是Material Design components for Angular中针对弹出动态内容这一场景的封装,功能强大、使用方便,尤其在开发自己的组件库时,可以让你少写许多代码,可以 ...

为什么使用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: 'top',        }      ]);  

创建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附加模板

TOOBUG(开发工程师)-本文作者
一个毫无志向的程序员,我就是我,不是toobug
792 0 2019-7-8 11:04
本文暂无评论,快来抢沙发!

扫一扫关注官方微信号

一手信息资讯权掌握尽在码云社

滚动新闻
CODESEEDING(码云社)一家致力于程序员成长、以内容为核心、以提问为引导的多元化成长社区。我们在线上为技术爱好者提供了一个优质的交流氛围环境,在线下同样和众多高校联合开办了技术沙龙品牌。
020-85534346
关注我们
  • 访问移动H5版
  • 官方微信公众号

码云社 - CODESEEDING 2.0© 2018-2019 码云社. TOOBUG ( 粤ICP备16114193号-3 )