在滚动上重新定位 CdkConnectedOverlay

我正在尝试使用CdkConnectedOverlay单击按钮时显示叠加层。它大部分工作正常，但覆盖层没有在滚动时重新定位。我确信我遗漏了一些小东西，但我一生都无法弄清楚。

我在用着Angular 7.2.8 and Angular CDK 7.3.3

认为这可能与缺少 cdk 样式有关（类似于this https://github.com/angular/components/issues/10821），但我导入了那些；如果缺少样式，我希望它一开始就无法正确显示。我的只是不会在滚动上重新定位。

模板：

<button
  (click)="isOpen = !isOpen"
  cdkOverlayOrigin
  #trigger="cdkOverlayOrigin"
>Show</button>

<ng-template
  cdkConnectedOverlay
  [cdkConnectedOverlayOrigin]="trigger"
  [cdkConnectedOverlayOpen]="isOpen"
>
 Popover content
</ng-template>

成分：

@Component ( {
  selector: 'app-popover',
  templateUrl: './popover.component.html',
  styleUrls: [ './popover.component.css' ],
  changeDetection: ChangeDetectionStrategy.OnPush,
} )
export class PopoverComponent {
  isOpen: boolean = false;
}

还有一个 Plunkr 显示了这个问题：https://stackblitz.com/edit/angular-7-popover https://stackblitz.com/edit/angular-7-popover

Update:

仅当弹出窗口位于其父元素溢出的元素中时，才会发生滚动重新定位问题overflow: auto。如果页面溢出，那么它工作正常。您可以使用以下模板查看此行为

<div style="height: 300px; overflow-y: auto">
  <!-- Scroll re-positioning does not work when scrolling in here -->
  <div style="height: 100px"></div>
  <app-popover>
    Popover content
  </app-popover>
  <div style="height: 400px"></div>
</div>

<div style="height: 100px;"></div>
<!-- Scroll re-positioning works when scrolling here -->
<app-popover>
  Popover content
</app-popover>
<div style="height: 1200px;"></div>

我还更新了 stackblitz 以显示此问题。

cdk 文档有时并不容易理解，而且其中到处都是隐藏的宝石:)

here https://material.angular.io/cdk/overlay/overview#scroll-strategies它指出；

每个策略通常都会注入 ScrollDispatcher（来自 @angular/cdk/scrolling），以便在滚动发生时收到通知。

我从这句话中了解到的是Overlay重新定位自己以响应来自的事件ScrollDispatcher。那么，这些滚动事件从哪里来呢？

不幸的是，文档中没有任何关于此的信息。所以我查看了代码并发现this https://github.com/angular/components/blob/aa2236820da4b14fb4fd9e6a57a05660b615da2c/src/cdk/scrolling/scroll-dispatcher.ts#L163

  /** Sets up the global scroll listeners. */
  private _addGlobalListener() {
    this._globalSubscription = this._ngZone.runOutsideAngular(() => {
      return fromEvent(window.document, 'scroll').subscribe(() => this._scrolled.next());
    });
}

意思是ScrollDispatcher监听滚动事件默认窗口.

在上面的情况下，它会响应窗口滚动时的事件，但不会响应内部容器。这符合我们迄今为止收集到的信息。

在这里我们可以得出结论Overlay不会通知内部容器内发生的滚动事件，我们需要做的就是向内部容器注册ScrollDispatcher

在此刻cdk可滚动 https://material.angular.io/cdk/scrolling/api#CdkScrollable指令介入救援并放置cdkScrollable在滚动内容器上解决了这个问题。

<div cdkScrollable style="height: 300px; overflow-y: auto">

这是一个工作demo https://stackblitz.com/edit/angular-7-popover-4ij7vh