如何配置在大屏幕和小屏幕上都有效的材质cdk覆盖位置策略？

Question

问题

我如何配置在大屏幕和小屏幕上都可以正常工作的cdk重叠素材位置策略？

目标

我的目标是使用Angular overlay CDK创建覆盖，并遵循以下规则：

• 永远不要在视口外放置位置
• 最大高度为300像素
• 位置叠加层y的优先级为上，中，下。
• 在高度低于300的屏幕上，使用可用的高度。
• 换句话说，没有最小高度。

有效的方法?

我已经满足了上述一些要求，如您所见，在具有足够垂直空间（在这种情况下为512px）的设备上，定位效果很好：

折断部分?

但是，从下面的gif图片可以看出，此在垂直空间不足（在这种情况下为255px）的小型设备上不起作用。实际上，从GIF可以看出，在两种情况下，它非常接近。位置正确，只有高度不对。

这里的目标是使用可用空间，如红色所示：

代码?

我有一个堆叠闪电战，您可以在其中试验here。

组件

openPopup(element: any) {
    const overlayRef = this.overlay.create({
      hasBackdrop: true,
      positionStrategy: this.overlay.position()
      .flexibleConnectedTo(element)
      .withLockedPosition()
      .withPositions([
        {
          panelClass: 'custom-panel1',
          originX: 'center',
          originY: 'center',
          overlayX: 'start',
          overlayY: 'top',
        },
        {
          panelClass: 'custom-panel2',
          originX: 'center',
          originY: 'center',
          overlayX: 'start',
          overlayY: 'center',
        },
        {
          panelClass: 'custom-panel3',
          originX: 'center',
          originY: 'center',
          overlayX: 'start',
          overlayY: 'bottom',
        },
      ])
      ,
      width: '200px',
      maxHeight: 300,
    });

    const popupComponentPortal = new ComponentPortal(PopupComponent);

    overlayRef.attach(popupComponentPortal);

    overlayRef.backdropClick().subscribe(() => {
      overlayRef.dispose();
    });
  }

全局样式

.cdk-overlay-pane {
    max-height: 300px;
}

注释

我一直在考虑在视口高度变小时使用全局定位策略。但是，我宁愿避免这种情况，因为我喜欢一个可以解决覆盖层任何高度（尊重航道最大高度）的解决方案。

在测试stackblitz时，我建议使用stackbllitz的“在新窗口中实时打开”功能。链接为here again。

如果您能帮助解决此问题或为我指明正确的方向，我将非常感激p‍♂️

Answer 1

我通过打开对话框后执行检查来解决了上述问题。这是通过resize-observer完成的。代码如下：

new_popup_menu = CreatePopupMenu();
AppendMenu(new_popup_menu, MF_STRING, 1, "TEST1");
AppendMenu(new_popup_menu, MF_STRING, 2, "TEST2");
AppendMenu(new_popup_menu, MF_STRING, 3, "TEST3");
AppendMenu(menu, MF_STRING|MF_POPUP, 
          (UINT_PTR)new_popup_menu, "dynamic menu");

我认为我需要进行额外检查的原因是，因为我实际上正在寻找的是可变高度物品的n cdk覆盖策略。

如果您对有效的解决方案感兴趣，那么我的stackblitz here工作正常：

Answer 2

对于高度，您可以替换：

maxHeight: 300,

作者

height: window.innerHeight < 300 ? window.innerHeight + 'px' : '300px',

这只是一个主意。直接在您的组件中使用window不是一个好主意，因为您无法模拟它。如果您想知道如何正确进行操作，请检查this article。