使用 ScrollStrategy 声明性创建 Overlay

Question

TL，DR；以声明方式创建 CdkConnectedOverlay 时如何使用 滚动策略？

详情； CdkConnectedOverlay 是一个促进以声明方式创建 Overlay 的指令。

它提供了众多

@Input()

属性，其中大部分都很直观。例如：

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

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

一个属性定义了滚动策略：

@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

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

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>

Answer 2

您可以通过此涉及不同的滚动策略。

@Input('cdkConnectedOverlayScrollStrategy')scrollStrategy: ScrollStrategy = this.scrollStrategies.block();

Answer 3

我在 github 中看到了 Angular Material Docs，并注意到了以下方法。

import { Overlay, ScrollStrategy } from '@angular/cdk/overlay';

scrollStrategy: ScrollStrategy;

constructor(private overlay: Overlay) {
    this.scrollStrategy = this.overlay.scrollStrategies.reposition(); // or block, close, noop
}