如何让Angular Material大Popover触发父容器滚动？

问题原因 #

CdkConnectedOverlay默认会将弹窗挂载到body节点下，不属于父滚动容器的子元素范畴，因此父容器的滚动设置不会对弹窗生效，弹窗内容过长时既不会触发父容器滚动，自身也可能因视口限制被截断。

解决方案 #

1. 将弹窗挂载到父容器内部

通过[cdkConnectedOverlayContainer]指令，把弹窗挂载到父滚动容器中，让弹窗成为父容器的子元素，这样父容器的overflow设置就能覆盖弹窗，内容过长时自动出现滚动条。

修改后的示例代码：

<div
  cdkScrollable
  style="height: 100px; overflow-y: auto; border: 1px solid green"
  #scrollContainer>
  <button
    (click)="isOpen = !isOpen"
    cdkOverlayOrigin
    #trigger="cdkOverlayOrigin">Show</button>
  <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayOpen]="isOpen"
    [cdkConnectedOverlayContainer]="scrollContainer">
    <!-- 替换为你的复选框等Popover内容 -->
    Popover content<br>
    Popover content<br>
    Popover content<br>
    Popover content<br>
    Popover content<br>
    Popover content<br>
    Popover content<br>
  </ng-template>
</div>

2. 给Popover自身添加滚动

如果不想改变弹窗挂载位置，可以直接给Popover内容容器设置最大高度和内部滚动，让弹窗自身处理内容溢出：

<ng-template
  cdkConnectedOverlay
  [cdkConnectedOverlayOrigin]="trigger"
  [cdkConnectedOverlayOpen]="isOpen">
  <div style="max-height: 80px; overflow-y: auto; padding: 8px;">
    <!-- 你的复选框内容 -->
    Popover content<br>
    Popover content<br>
    Popover content<br>
    Popover content<br>
  </div>
</ng-template>

3. 调整弹窗位置策略

通过指定弹窗的备选位置，让弹窗在底部空间不足时自动向上展开，避免被视口截断：
首先在组件类中定义位置数组：

import { ConnectionPositionPair } from '@angular/cdk/overlay';

// 优先向下展开，空间不足时向上
positions: ConnectionPositionPair[] = [
  { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top' },
  { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom' }
];

然后在模板中绑定：

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

内容的提问来源于stack exchange，提问作者DJ22T