Angular 如何将位置策略添加到角度CDK覆盖？

如何将定位策略（

ConnectedPositionStrategy

）添加到角度CDK覆盖

我尝试通过

positionStrategy

属性指定它，并将其传递到

overlay.create（）

从'@angular/cdk/Overlay'导入{Overlay，ConnectedPositionStrategy}；
// ...
导出类MyComponent{
构造函数（私有覆盖：覆盖）{}
showOverlay（）{
让overlay=this.overlay.create（{positionStrategy:ConnectedPositionStrategy}）；
// ...
}
}

但我得到了这个错误：

ERROR in src/app/explore/explore.component.ts(48,40): error TS2345: Argument of type '{ positionStrategy: typeof ConnectedPositionStrategy; }' is not assignable to parameter of type 'OverlayConfig'.
  Types of property 'positionStrategy' are incompatible.
    Type 'typeof ConnectedPositionStrategy' is not assignable to type 'PositionStrategy'.
      Property 'attach' is missing in type 'typeof ConnectedPositionStrategy'.

我错过什么了吗？文档不太清楚如何指定定位策略

以下是我的依赖项（从

ng version

输出）：

---

此外，我还尝试通过

new

关键字初始化

positionStrategy

，但现在我不知道如何传递参数。

在您的示例中至少有两个错误：

1/方法create exist on class Overlay not（OverlayContainer）

2/ConnectedPositionStrategy不是一个对象，它是一个typescript接口 （这就是为什么会出现错误…ConnectedPositionStrategy的类型…）

然后，创建“已连接”覆盖的最佳方法是使用OverlayPositionBuilder（）

如果您扫描角材料回购，您将看到一些示例，如datepicker中使用的：

            .connectedTo(this._datepickerInput.getPopupConnectionElementRef(), { originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' })

因此，您当然可以使用此代码段，方法是用组件elementRef替换此.\u datepickerInput.getPopupConnectionElementRef（）

 constructor (
 ...
 private overlay: Overlay
 ) {}

showOverlay() {
    let overlay = this.overlay.create({
        positionStrategy: this.overlay.position().connectedTo(<yourElRef>, { originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' })
    });
 }

构造函数(
...
私有覆盖：覆盖
) {}
showOverlay（）{
让覆盖=this.overlay.create({
positionStrategy:this.overlay.position（）.connectedTo（，{originX:'start'，originY:'bottom'}，{overlayX:'start'，overlayY:'top'}）
});
}

经过一些搜索，包括这篇文章。我提供了一个更新的解决方案，用于使用cdk覆盖菜单和其他具有连接位置策略的菜单。（使用灵活的自连接显示不推荐的装饰）

然后根据您的需要添加滚动策略，例如重新定位，以防您希望菜单在滚动上重新定位

scrollStrategy: this.overlay.scrollStrategies.reposition()

但是，如果您的滚动不在主体上，则需要从添加cdk scrollable指令

import {ScrollingModule} from '@angular/cdk/scrolling';

到

Oops。。我的意思是

Overlay

。更新问题。你能提供一个更新的解决方案吗，因为connectedTo（）显示了弃用标志，所以我想使用flexibleConnectedTo（），谢谢Jorge，非常有用，现在我必须考虑如何将所有内容设置到位，如果覆盖层靠近页面底部，可能会将其移动到原点上方。。。但这已经很好了

scrollStrategy: this.overlay.scrollStrategies.reposition()

import {ScrollingModule} from '@angular/cdk/scrolling';

<div class="your-scroll-container" cdk-scrollable>