使用 ScrollStrategy 声明式创建 Overlay

Question

TL,DR; scroll strategy be used when creating a 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

Strategy to be used when handling scroll events while the overlay is open.

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

源代码 (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

Declarative creation of an Overlay with ScrollStrategy

angular-material2

angular

angular-cdk