[JavaScript知识库]@angular/cdk中overlay的使用

cdk是angular官方维护的一个开发工具包，其实官网写的很明白了，只是overlay这块只有一个用指令写的demo，其他的一些用法只能看个人的理解能力去发挥他的强大功能了。了解cdk还是因为在使用ngzorro中发现这个浮层做的也太牛了，兴趣驱动下去了解才发现的。

其实一般情况下用了ngzorro，基本不用考虑去封装什么通用组件了，ngzorro基本都涵盖了，但是要想提高还是需要了解的，比如当你维护公司的组件库的时候。当初就是因为没了解cdk才写了那么多冤枉代码，浮层指令，拖拽功能，如今看到官方其实都有，才知道自己写的什么玩意，留下了菜鸡的眼泪o(╥﹏╥)o

中文官网有些部分感觉是机器翻译的，自己斟酌了

https://material.angular.cn/cdk/overlay/overview

1. 首先当然是先安装cdk了

npm install @angular/cdk

2. 引入相关的css

@import "~@angular/cdk/overlay-prebuilt.css";

3. 导入相应模块，比如：

 imports: [
	......
    OverlayModule,
    // 这个模块在实现一些方式上要用，官网也有介绍
    PortalModule
    ......
 ],
 providers:{provide: OverlayContainer, useClass: FullscreenOverlayContainer}

4. 准备就绪就可以撸代码了，其实没什么好说的，结合官网很容易理解，写下来只是怕自己忘记而已O(∩_∩)O哈哈~

<section>
    <button (click)="openOverlay(0)" >打开弹窗,中心位置</button>
    <button (click)="openOverlay(100)" >打开弹窗,top100</button>
    <button (click)="byConnectedTo('component')" #byCompOri>依赖触发点打开弹窗展示组件</button>
    <button (click)="byConnectedTo('template')" #byTempOri>依赖触发点打开弹窗展示ng-template</button>
    <button (click)="direOpen=!direOpen" #trigger="cdkOverlayOrigin" cdk-overlay-origin>指令的方式展示</button>
</section>
<!-- 使用ng-template的方式要先导入PortalModule，然后在添加cdk-portal指令以及cdkPortal -->
<ng-template cdk-portal #tempContent="cdkPortal">
    <div style="background-color: aliceblue;">
        <p>我是ng-template里的内容</p>
        <p>我是ng-template里的内容</p>
        <p>我是ng-template里的内容</p>
        <p>我是ng-template里的内容</p>
    </div>
</ng-template>
<!-- 这些输入值都可以在官网api的CdkConnectedOverlay部分找到 -->
<ng-template cdk-connected-overlay
    [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayWidth]="200"
    [cdkConnectedOverlayHasBackdrop]="true"
    [cdkConnectedOverlayOpen]="direOpen"
    (backdropClick)="direOpen=false">
    <div style="background-color: aliceblue;">
        <p>我是通过指令出现的内容</p>
        <p>我是通过指令出现的内容</p>
        <p>我是通过指令出现的内容</p>
        <p>我是通过指令出现的内容</p>
    </div>
</ng-template>

  constructor(
    private overlay: Overlay,
    private vc: ViewContainerRef
  ) { }

  @ViewChild('byCompOri', { static: false })
  byCompOri!: ElementRef; // 注意是ElementRef
  @ViewChild('byTempOri', { static: false })
  byTempOri!: ElementRef;
  @ViewChild('tempContent', { static: false })
  tempContent: TemplatePortal; // 注意是TemplatePortal

  direOpen = false;

  // GlobalPositionStrategy 策略，不依赖其他元素
  openOverlay(value: number) {
    const config = new OverlayConfig();
    // 配置定位策略，可以配置水平垂直居中，也可以根据上下左右配置
    // 这里是水平垂直居中和水平居中距离顶部100px的两种方式
    if (value) {
      config.positionStrategy = this.overlay.position().global().top(`${value}px`).centerHorizontally();
    } else {
      config.positionStrategy = this.overlay.position().global().centerHorizontally().centerVertically();
    }
    // 展示背景浮层
    config.hasBackdrop = true;
    // 创建overlay浮层
    const overlayRef = this.overlay.create(config);
    // 点击背景关闭
    overlayRef.backdropClick().subscribe(() => {
      overlayRef.dispose();
    });
    // 添加浮层内容，使用动态组件的方式
    // attach接收TemplatePortal和Component类型，简单说就是接收组件类型和ng-template类型的
    const cdkCompRef = overlayRef.attach(new ComponentPortal(OverlayDemoComponent));
    cdkCompRef.instance.inputTest = '组件输入数据测试';
  }

  // ConnectedPositionStrategy 策略，依赖其他元素，这里依赖点击的位置
  byConnectedTo(attachType: string) {
    let origin = null;
    if (attachType === 'component') {
      origin = this.byCompOri.nativeElement;
    } else if (attachType === 'template') {
      origin = this.byTempOri.nativeElement;
    }
    const strategy = this.overlay.position().flexibleConnectedTo(origin).withPositions([{
      // 浮层与连接点的位置，是必填项
      originX: 'center',
      originY: 'bottom',
      overlayX: 'center',
      overlayY: 'top',
      // 偏移量
      // offsetX:0,
      // offsetY:0
    }]);

    strategy.withLockedPosition(true);
    const config = new OverlayConfig({ positionStrategy: strategy });
    config.hasBackdrop = true;
    const overlayRef = this.overlay.create(config);

    if (attachType === 'component') {
      overlayRef.attach(new ComponentPortal(OverlayDemoComponent));
    } else if (attachType === 'template') {
      // 添加一个空白的css类可以让浮层背景存在却看不到，也无法点击空白处
      config.backdropClass = 'cdk-bgc-test';
      overlayRef.attach(this.tempContent);
    }

    overlayRef.backdropClick().subscribe(() => {
      overlayRef.dispose();
    })
  }

效果就不展示了就是一个浮层效果

这里附上其他人更详细的介绍