cdk覆盖默认位置

Question

我正在使用 cdk overlay flexibleConnectedTo(origin)。所以开是靠freespace，如果底部space不够就开在上面。但默认情况下，如果顶部和底部的space足够，则在顶部打开。是否可以更改默认位置以在底部打开它？

  private getOverlayPosition(origin): PositionStrategy {
    return this.overlay.position()
      .flexibleConnectedTo(origin)
      .withPositions(this.getPositions())
      .withFlexibleDimensions(false)
      .withPush(false)
  }

  private getPositions(): ConnectionPositionPair[] {
    return [
      {
        originX: 'center',
        originY: 'top',
        overlayX: 'center',
        overlayY: 'bottom'
      },
      {
        originX: 'center',
        originY: 'bottom',
        overlayX: 'center',
        overlayY: 'top',
      },
    ]
  }

Answer 1

只需交换 ConnectionPositionPair[] 数组中的那些元素，因为它们的顺序很重要。如果 cdk 可以根据第一个位置定位您的元素，它就不会去查看第二个位置。

  private getPositions(): ConnectionPositionPair[] {
    return [
      {
        originX: 'center',
        originY: 'bottom',
        overlayX: 'center',
        overlayY: 'top'
      },
      {
        originX: 'center',
        originY: 'top',
        overlayX: 'center',
        overlayY: 'bottom',
      },
    ]
  }

引用link

positions: ConnectionPositionPair[] //Ordered list of preferred positions, from most to least desirable.

cdk覆盖默认位置

cdk overlay default possition

overlay

position

angular

angular-cdk