英文:
Angular CDK:Getting error for FlexibleConnectedPositionStrategy in Overlay config
问题
我想使用overlay.position().flexibleConnectedTo()来配置叠加层，因为根据官方文档，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: 至少需要一个位置。在FlexibleConnectedPositionStrategy.push”
英文:
I want to configure an overlay for with overlay.position().flexibleConnectedTo() because connectedTo() is deprecated as per the official docs.
Otherwise there is a quesstion having a good answer for connectedTo()
Here is my Code
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);
but getting this error:
"ConnectedToFlexibleConnectedPositionStrategy: At least one position is required. at FlexibleConnectedPositionStrategy.push"
答案1
得分: 12
以下是已翻译的内容：
const positionStrategy = this.overlay.position()
.flexibleConnectedTo(origin)
.withPositions([{
// 在这里，叠加层的左上角与原点的左下角相连接；
// 当然，您可以更改此对象或动态生成它；
// 此外，您可以在此数组中指定多个对象，以便CDK找到最合适的选项
originX: 'start',
originY: 'bottom',
overlayX: 'start',
overlayY: 'top'
} as ConnectedPosition])
.withPush(false); // 或者 true，如果您希望在叠加层不适合时将其推入屏幕
英文:
For those curious who stuck with the accepted answer because of the lack of the implementation of this.getPositions(), here's a quick sample for copy-pasting:
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
答案2
得分: 0
应该像这样：
positionStrategy=this.overlay.position().flexibleConnectedTo(origin)
.withPositions(this.getPositions()).withPush(false)
这个函数this.getPositions()返回一个位置数组。
注：答案基于@Eliseo的评论，解决了我的问题。
英文:
It should be like
positionStrategy=this.overlay.position().flexibleConnectedTo(origin)
.withPositions(this.getPositions()).withPush(false)
the function this.getPositions() return an array of positions
Note: Answer is based on a comment by @Eliseo which solved my problem
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论