在角度cdk叠加层上获得有效位置？

Question

  

是否有一种方法可以将附加的组件插入叠加层   活动位置？例如，我对要在上面打开的工具提示说，但这   无法完成，叠加层将在下面将其打开。我想添加一个   箭头从工具提示指向我的元素，如果   叠加层位于元素上方/下方以正确定位箭头

Answer 1

ConnectedPositionStrategy （不建议使用）具有 onPositionChange 属性，并且 FlexibleConnectedPositionStrategy 具有 positionChanges 属性，我们无法在创建叠加层之前订阅此观察对象，因此，解决方案是在创建叠加层之后进行订阅：

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