angular - 在角度 cdk 覆盖上获取活动位置？

Question

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

Answer 1

ConnectedPositionStrategy (deprecated) 有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));

Answer 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' <--
      }
    ])
})