Angular CDK :Getting error for FlexibleConnectedPositionStrategy in Overlay config

标签 angular angular-material typescript2.0 angular-cdk

我想为overlay.position().flexibleConnectedTo() 配置一个覆盖,因为connectedTo() 已根据official docs 被弃用.
否则有 quesstion对 connectedTo() 有一个很好的回答
enter image description here

这是我的代码

    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:至少需要一个位置。在 FlexibleConnectedPositionStrategy.push”

最佳答案

对于那些因为缺乏 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 error for FlexibleConnectedPositionStrategy in Overlay config,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59612621/

相关文章:

angular - 输入中的值在 Angular 2 中未绑定(bind)

javascript - 在 Google map 事件监听器中打开时,Angular Material 对话框为空

angular - 为什么在代码更改后分页器页面索引不会更改?

javascript - 如何在 ArcGIS Esri Map 中自动显示位置的放大 View ?

node.js - 无法在 ssr 中执行 https 请求

angular-material - 角 Material : How to display one toast after another one is displayed while keeping both on screen?

javascript - Typescript 2 如何强制执行不可为 null 的类型?

typescript - TypeScript 中联合类型的相应子类型的泛型

angular - Karma DEBUG RUNNER 中没有 Angular 源映射

css - 从 Angular Material <mat-chip> 中移除 box-shadow