在角度 cdk 覆盖上获取活动位置？答案

【问题标题】：Get active position on angular cdk overlay?在角度 cdk 覆盖上获取活动位置？
【发布时间】：2018-07-21 16:15:56
【问题描述】：

有没有办法让附加组件进入覆盖层活跃的位置？例如，我说要在上面打开一个工具提示，但是这个无法完成，叠加层将在下面打开它。我想添加一个从工具提示指向我的元素的箭头，如果覆盖在元素上方/下方以正确定位箭头

【问题讨论】：

【解决方案1】：

ConnectedPositionStrategy（已弃用）具有 onPositionChange 属性和 FlexibleConnectedPositionStrategy 有 positionChanges 属性，我们不能在叠加层创建之前订阅这个 observables，所以，解决方案是在叠加层创建之后订阅：

const positionStrategy = this.overlay
        .position()
        .flexibleConnectedTo(this.selectHeader)
        .withPositions([
         {
            originX: 'start',
            originY: 'bottom',
            overlayX: 'start',
            overlayY: 'top',
          },
          {
            originX: 'start',
            originY: 'top',
            overlayX: 'start',
            overlayY: 'bottom',
          },
        ]);
    this.panelOverlay = this.overlay.create({positionStrategy});
    positionStrategy.positionChanges.subscribe(pos => console.log(pos));

【讨论】：

不够好，如果叠加层被侧推，原点可能会关闭，所以计算不正确。

【解决方案2】：

您可以如下使用“panelClass”：

return new OverlayConfig({
  hasBackdrop: true,
  positionStrategy: this.overlay.position()
    .flexibleConnectedTo(new ElementRef(mouseEvent.target))
    .withFlexibleDimensions(false)
    .withPositions([
      {
        originX: 'start',
        originY: 'top',
        overlayX: 'start',
        overlayY: 'top',
        panelClass: 'top' <--
      },
      {
        originX: 'start',
        originY: 'bottom',
        overlayX: 'start',
        overlayY: 'bottom',
        panelClass: 'bottom' <--
      }
    ])
})

【讨论】：