Question

TL，DR ;在声明性地创建scroll strategy时如何使用CdkConnectedOverlay？

详细; CdkConnectedOverlay是一个促进声明创建叠加的指令。

它提供了numerous @Input()个属性，其中大多数都是直观的。例如：

<ng-template cdkConnectedOverlay
             cdkConnectedOverlayOpen="true"
             cdkConnectedOverlayOffsetX="0"
             cdkConnectedOverlayOffsetY="0">

    <span>I'm an overlay</span>
</ng-template>

一个属性定义了scroll strategy：

@Input('cdkConnectedOverlayScrollStrategy')
scrollStrategy: ScrollStrategy

在叠加层处理滚动事件时使用的策略开。

然而，在声明性地创建叠加层时，如何定义滚动策略尚不清楚。

源代码（material2/src/cdk/overlay/overlay-directives.ts）提供了一些见解：

  /** Strategy to be used when handling scroll events while the overlay is open. */
  @Input('cdkConnectedOverlayScrollStrategy') scrollStrategy: ScrollStrategy =
      this._scrollStrategy();

显然，可以提供策略，但与其他属性不同，它的值为this._scrollStrategy();。

Answer 1

您可以通过此方法使用不同的滚动策略。

@Input（'cdkConnectedOverlayScrollStrategy'）scrollStrategy：ScrollStrategy = this.scrollStrategies.block（）;

Answer 2

我不知道这是否是最佳方法，但是为了帮助您找到解决方案。这就是我所做的：

scrollStrategy: ScrollStrategy;

constructor (private sso: ScrollStrategyOptions) {
    this.scrollStrategy = sso.<select-your-strategy>();
}

然后只需在视图上

<ng-template cdkConnectedOverlay
             cdkConnectedOverlayOpen="true"
             cdkConnectedOverlayOffsetX="0"
             cdkConnectedOverlayOffsetY="0"
             [cdkConnectedOverlayScrollStrategy]="scrollStrategy">
    <span>I'm an overlay</span>
</ng-template>

使用ScrollStrategy声明性创建Overlay

2 个答案: