Angular CDK:Getting 覆盖配置中的 FlexibleConnectedPositionStrategy 错误

Question

我想为 overlay.position().flexibleConnectedTo() 配置覆盖，因为根据 official docs 已弃用 connectedTo()。否则对 connectedTo() 有一个很好的答案

这是我的代码

    const origin:FlexibleConnectedPositionStrategyOrigin=this.RefElem;
    const overlayConfig = new OverlayConfig();
    overlayConfig.positionStrategy = this.overlay.position().flexibleConnectedTo(origin);
    const overlayRef = this.overlay.create(overlayConfig);
    const userProfilePortal = new ComponentPortal(
      GraphMetaSignalSelectorComponent
    );
    overlayRef.attach(userProfilePortal);

但出现此错误： "ConnectedToFlexibleConnectedPositionStrategy: At least one position is required. at FlexibleConnectedPositionStrategy.push"

Answer 1

应该是

positionStrategy=this.overlay.position().flexibleConnectedTo(origin)
                 .withPositions(this.getPositions()).withPush(false)

函数 this.getPositions() return 位置数组注意：答案基于@Eliseo 的评论，该评论解决了我的问题

Answer 2

对于那些因为缺少 this.getPositions() 的实施而坚持接受的答案的好奇者，这里有一个复制粘贴的快速示例：

const positionStrategy = this.overlay.position()
      .flexibleConnectedTo(origin)
      .withPositions([{
        // here, top-left of the overlay is connected to bottom-left of the origin; 
        // of course, you can change this object or generate it dynamically;
        // moreover, you can specify multiple objects in this array for CDK to find the most suitable option
        originX: 'start',
        originY: 'bottom',
        overlayX: 'start',
        overlayY: 'top'
      } as ConnectedPosition])
      .withPush(false); // or true, if you want to push the overlay into the screen when it doesn't fit

Angular CDK:Getting 覆盖配置中的 FlexibleConnectedPositionStrategy 错误

Angular CDK:Getting error for FlexibleConnectedPositionStrategy in Overlay config

angular-material

typescript2.0

angular

angular-cdk