大 Angular 材料彈出窗口應該使父內容可滾動

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);
  }

堆棧閃電戰

Answer 2

根本原因分析：看來你遇到的問題與cdkConnectedOverlay打開時不影響父容器的滾動能力有關。

請遵循以下說明：將 cdkConnectedOverlay 包裝在具有固定高度和 overflow-y: auto 樣式的 div 中。 這將允許父容器在彈出內容超過固定高度時變得可滾動。

你能試試我下面的代碼，看看它是否也適合你：

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

提示：您可以根據您的設計要求調整包裹 cdkConnectedOverlay 的 div 的固定高度。 這應該使父容器在彈出窗口打開時變得可滾動。

其他解決方案：另一種方法是使用像cdk-virtual-scroll-viewport這樣的庫來向容器添加滾動，這將允許父容器在彈出窗口打開時變得可滾動，而且當你有大量的項目。

希望能幫助到你。 一切順利。