Angular CDK - 滚动时覆盖附加到目标

Question

我正在尝试使用 Angular CDK 实现覆盖。 Overlay 用于具有水平滚动的容器内。如果我们滚动到左侧，叠加层应该会停留在原始位置或消失。

我可以通过使用 CDK 指令成功实现此行为。 （通过单击打开按钮打开覆盖并滚动到左侧）。叠加层跟随按钮。

Stackblitz example that uses the directives

我尝试在不使用指令但使用 Overlay 服务的情况下实现相同的目标。

Stackblitz example that uses the services

在这种情况下，叠加层会保持不变，不会随内容移动。我需要在指令上使用服务，因为我们将把它封装在自定义指令后面。任何关于如何通过服务实现与指令相同的行为的想法都非常受欢迎？提前谢谢。

Answer 1

我认为您应该能够通过以下配置实现该行为：

this.overlayRef = this.overlay.create({
  scrollStrategy: this.overlay.scrollStrategies.reposition(), // remove autoClose: true option
  hasBackdrop: false,
  positionStrategy: this.overlay
    .position()
    .flexibleConnectedTo(this.button)
    .setOrigin(this.button)
    .withScrollableContainers([this.scrollContainer])
    .withPositions([                                         // correct this as you want
      {
        originX: "start",
        originY: "bottom",
        overlayX: "start",
        overlayY: "top"
      }
    ])
    .withFlexibleDimensions(false)                          // add this
    .withPush(false)                                       // add this
}); 

Forked Stackblitz