angular cdk Overlay

HTML

   <div  (click)="showOverlayPanelConnectTemplate()" #connectTemplateOrigin >{{title}}</div>
    <ng-template  cdkConnectedOverlay
    nzConnectedOverlay #overlayConnectTemplate>
    </ng-template>
@NgModule({
    imports: [
    ...
        PortalModule,
        OverlayModule,
  ...
    ],
})
 constructor(
    public overlay: Overlay,
    public viewContainerRef: ViewContainerRef
  ) {
    super(ChangeDetectorRef, elementRef);
  }
 @Input() title:string="查看";
  //水平方向对齐方式 'left'|'right'，默认左对齐  根据需求后续可以追加'center'模式
  @Input() algin="left";
  @ViewChild('connectTemplateOrigin') _overlayConnectTemplateOrigin:ElementRef;
  @ViewChild('overlayConnectTemplate') _overlayOriginTemplateDirective: TemplateRef<any>;
  @Input() offsetX: number=0;
  @Input() offsetY: number=0;
  origin={left:[{ originX: 'start', originY: 'bottom' },{ originX: 'start', originY: 'top' }],right:[{ originX: 'end', originY: 'bottom' },{ originX: 'end', originY: 'top' }]};
  overlayP={left:[{ overlayX: 'start', overlayY: 'top' },{ overlayX: 'start', overlayY: 'bottom' }],right:[{ overlayX: 'end', overlayY: 'top' },{ overlayX: 'end', overlayY: 'bottom' }]};
/*
   *@e:鼠标事件
   *@dom：动态悬浮组件
   *@triggrHei：点击元素高度
   */
  ShowFlow(e, dom, triggrHei) {
    let height = document.body.scrollHeight;
    let topHei = e.clientY - e.offsetY + triggrHei;
  /*   let str = dom.style.display == "none" ? "block" : "none";
    if (str == "block"&&this.isSingle) {
      let NodeList= document.querySelectorAll(".show-work-flow.swf-active") as NodeListOf<HTMLElement>;
      NodeList.forEach(function(el) {
            el.style.display = "none";
        });
    }  */
    // dom.style.display = str;
    dom.classList.toggle("swf-active");
    let X=e.clientX - e.offsetX,Y;
    if (height - topHei < dom.clientHeight) {
      // dom.style.top = -dom.clientHeight + "px";
      Y=e.clientY - e.offsetY-dom.clientHeight;
    }else{
      Y=e.clientY - e.offsetY+14;
    }
    dom.style.top=Y+"px";
    dom.style.left=X+"px";
    document.body.appendChild(dom);
    // this.showOverlayGlobalPanelPosition(dom,X,Y);
  }
    /**
     * overlay 在整个屏幕位置，自己控制位置
     */
    showOverlayGlobalPanelPosition(dom,X,Y) {
      const config = new OverlayConfig();
      config.positionStrategy = this.overlay.position()
          .global()
          .left(`${X}px`)
          .top(`${Y}px`);
      config.hasBackdrop = true;
      const overlayRef = this.overlay.create(config);
      overlayRef.backdropClick().subscribe(() => {
          overlayRef.dispose();
      });
      overlayRef.attach(new ComponentPortal(dom));
  }
   /**
     * overlay connect origin 显示，依附ng-template
     */
    showOverlayPanelConnectTemplate() {
      const strategy = this.overlay.position()
      .connectedTo(this._overlayConnectTemplateOrigin, this.origin[this.algin][0], this.overlayP[this.algin][0])
            .withFallbackPosition(this.origin[this.algin][1],  this.overlayP[this.algin][1],this.offsetX,this.offsetY);
      // strategy.withLockedPosition(true);
      const config = new OverlayConfig({positionStrategy: strategy});
      config.hasBackdrop = true;
      // config.scrollStrategy = this.overlay.scrollStrategies.reposition();// 更随滑动的策略
      const overlayRef = this.overlay.create(config);
      overlayRef.backdropClick().subscribe(() => {
          overlayRef.dispose();
      });
      overlayRef.attach(new TemplatePortal(this._overlayOriginTemplateDirective, this.viewContainerRef));
  }

  .cdk-overlay-backdrop {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-tap-highlight-color: transparent;
    -webkit-transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 0;
    position: absolute;
    pointer-events: auto;
    z-index: 1000;
  }
  
  .cdk-overlay-pane {
    position: absolute;
    pointer-events: auto;
    z-index: 1000;
  }
.cdk-overlay-container {
    pointer-events: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 1000;
    }