angular - 大型 Angular Material 弹出框应使父内容可滚动

Question

我的项目中有一个弹出窗口，其中一些复选框列在另一个复选框下方。

现在一切工作正常，但是当屏幕分辨率有点小时，内容会在底部被切碎并且父容器不可滚动，这种情况仅发生在 CdkOverlay 中，因为它似乎不会影响父容器显示弹出窗口时的内容，您可以在 stackblitz 上看到一个工作示例

我无法分享我的主要代码，但这是我在 stackblitz 上尝试过的，它与我的项目非常相似:

 <div
  cdkScrollable
  style="height: 100px; overflow-y: auto; border: 1px solid green">
  <button
    (click)="isOpen = !isOpen"
    cdkOverlayOrigin
    #trigger="cdkOverlayOrigin">Show</button>
  <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayOpen]="isOpen">
    Popover content 
  </ng-template>
</div>

正如您在链接上看到的，当弹出窗口打开时，父级不会滚动，我该如何实现这一点？

Answer 1

cdk-overlay 附加在应用程序外部

如果您只想更改“父级”，您可以在(附加)事件中执行此操作

<!--see the template reference variable "anchor" 
    and the style="position:relative"-->
<div #anchor
    style="position:relative;
    height: 100px; 
    overflow-y: auto; 
    border: 1px solid green ">
  <button (click)="isOpen = !isOpen" cdkOverlayOrigin #trigger="cdkOverlayOrigin">
    Show
  </button>

  <!--in attach event you pass the "anchor"-->
  <ng-template #template
    cdkConnectedOverlay
    (attach)="changeParent(anchor)"
    ...
  >
   ...
  </ng-template>

changeParent 很简单:

  //in constructor inject the Overlay service
  constructor(private overlay: Overlay) { }

  changeParent(el:any)
  {
    //get the "cdk-panel
    const container=(this.overlay as any)
                        ._overlayContainer.getContainerElement()

    //it's necessary change the position to "absolute"
    container.style.position='absolute'

    //and take account the position of the div
    const rect=el.getBoundingClientRect()
    container.style['margin-top']=-rect.top+'px'
    container.style['margin-left']=-rect.left+'px'


    //change the parent using appendChild
    el.appendChild(container);
  }

一个stackblitz