Angular CDK Overlay：如何计算投影内容的高度/宽度

Question

您好，我使用Angular CDK叠加层。 config中的属性之一是FlexibleConnectedPositionStrategy。我正在尝试在点击触发器的顶部附加叠加层。当顶部有足够的空间来覆盖时，一切都很好。我想做的是检查顶部是否没有足够的空间，然后将覆盖层附加到触发器的底部。为此，在调用Overlay.open（...）以获取对投影内容的访问权限后，我需要某种方式，以便我可以计算其尺寸。有办法吗？

到目前为止，我只看到访问内部_projectedViews []数组的骇人听闻的方法，但是它没有公开的功能。试图找到更清洁的方法。

Answer 1

Andrei，当您定义CDK时，选择“ positionStrategy”。位置的顺序在数组withPositions中定义。您可以看到此链接（我不知道是否有点过时）：netanet basal cdk overlay（确实Angular材质cdk-overlay非常差），我尝试在此SO

通常，您导入叠加层和overlayPositionBuilder

constructor(public overlay: Overlay)

您使用create创建overLayRef

const overlayRef = overlay.create();

函数create是类型为OverlayConfig的对象，具有以下属性：高度，宽度，maxWidth ..和（以及其他）positionStrategy，它是类型为PositionStrategy的对象

因此，首先创建一个PositionStrategy类型的对象。为此，您可以使用叠加层position()的方法

该对象具有方法flexibleConnectedTo

您可以选择“已连接”到ElementRef | HTMLElement |点＆{宽度？：数字；高度？：数字;};

此返回一个FlexibleConnectedPositionStrategy，您可以将其赋值给位置（ConnectionPositionPair的数组），也可以直接给其值，或使用withPositions方法）

例如，

const positionStrategy = this.overlayPositionBuilder
      .flexibleConnectedTo({ x, y })
      .withPositions([{
        originX: 'center',
        originY: 'top',
        overlayX: 'center',
        overlayY: 'bottom',
      },
      {
        originX: 'center',
        originY: 'bottom',
        overlayX: 'center',
        overlayY: 'top',
      }]);
首先尝试附加到顶部，但是如果空间不足，请使用第二个定义的位置