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

Question

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

标签： angularangular-cdk

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));