Angular 角度CDK了解叠加位置系统

我真的很想了解叠加位置参数，但没有任何运气。我也找不到关于这个主题的任何文档

下面的代码是什么意思

const positions = [
  new ConnectionPositionPair({ originX: 'start', originY: 'bottom' }, { overlayX: 'start', overlayY: 'top' }),
  new ConnectionPositionPair({ originX: 'start', originY: 'top' }, { overlayX: 'start', overlayY: 'bottom' })
];
this.positionStrategy = this._overlay.position()
.flexibleConnectedTo(this.getConnectedElement())
.withPositions(positions)
.withFlexibleDimensions(false)
.withPush(false);

---

关于角度覆盖CDK的文档仍然不多。我学到的大部分知识都来自他们的Github回购协议

全球定位战略

这将是一种全球定位战略。您正在创建的覆盖将直接定位在屏幕上，而不是与元素相关。这适用于对话框弹出窗口或模式窗口

  overlayConfig = this.overlay.position().global()
    .centerHorizontally().centerVertically();

灵活连接到策略

这是您想要用于工具栏、菜单以及从按钮中弹出的内容。您必须传入对要将覆盖连接到的按钮的引用：

<button id="toolbar-icons" cdkOverlayOrigin mat-button class="toolbar-button" (click)="this.showAppContext()">

连接位置对-这是一个从最理想到最不理想的首选位置列表。因此，它将首先尝试使用您传入的第一个位置

这将是“开始”、“结束”或“中心”。它是覆盖层的附着点。如果已将按钮传递给.flexibleConnectedTo函数，则表示该元素的开始、结束和中心

原创：这将是“顶部”、“底部”或“中心”。这是指传入的元素的顶部、底部或中心

因此，

{originX:'start'，originY:'bottom'}

将是按钮的左下角

overlayX和overlayY具有相同的选项，但请参考将覆盖附着到的位置<代码>{overlayX:'start'，overlayY:'top'}正在将覆盖的左上角附加到我们指定的原点

然后，正如您在数组中看到的，我们可以传入多个位置。如果叠加不适合第一个位置，它将尝试阵列中的下一个位置。因此，如果第一种方式的叠加不适合屏幕，它将自动切换到第二个位置，这里定义为将底部的左上角连接到叠加的左下角

const positions = [
  new ConnectionPositionPair(
   { originX: 'start', originY: 'bottom' },
   { overlayX: 'start', overlayY: 'top' }),
  new ConnectionPositionPair(
  { originX: 'start', originY: 'top' },
  { overlayX: 'start', overlayY: 'bottom' })];
];

使用推送功能

您可以将withPush设置为true，如果所提供的位置都不匹配，将在屏幕上推动覆盖

代码仍然是查看文档的最佳位置：

---

大卫·林克（David Rinck）对这个问题的回答在经历了数日的反复尝试后对我有所帮助，因此我想我应该发布我根据这个问题整理的备忘单，希望它能对将来的人有所帮助

这可能不适用于所有人，但它帮助了我：

// top-left
originX: 'start', // left corner of the button
originY: 'bottom', // bottom corner of the button
overlayX: 'start', // left corner of the overlay to the origin
overlayY: 'top', // top corner of the overlay to the origin

// top-right
originX: 'end', // right corner of the button
originY: 'bottom', // bottom corner of the button
overlayX: 'end', // right corner of the overlay to the origin
overlayY: 'top', // top corner of the overlay to the origin

// bottom-left
originX: 'start', // left corner of the button
originY: 'top', // top corner of the button
overlayX: 'start', // left corner of the overlay to the origin
overlayY: 'bottom', // top corner of the overlay to the origin

// bottom-right
originX: 'end', // right corner of the button
originY: 'top', // top corner of the button
overlayX: 'end', // right corner of the overlay to the origin
overlayY: 'bottom', // top corner of the overlay to the origin

---

你能解释一下{originX:'start'，originY:'top'}，{overlayX:'start'，overlay:'bottom'}吗？添加了一个解释。让我知道这是否有帮助，或者是否有什么需要澄清的。到2019年，角度CDK文档可能会有用：它似乎是一个强大的定位系统，但我不知道如何将覆盖层的右边缘与连接元素的左边缘对齐。我正在尝试复制引导popover position=“left”

// top-left
originX: 'start', // left corner of the button
originY: 'bottom', // bottom corner of the button
overlayX: 'start', // left corner of the overlay to the origin
overlayY: 'top', // top corner of the overlay to the origin

// top-right
originX: 'end', // right corner of the button
originY: 'bottom', // bottom corner of the button
overlayX: 'end', // right corner of the overlay to the origin
overlayY: 'top', // top corner of the overlay to the origin

// bottom-left
originX: 'start', // left corner of the button
originY: 'top', // top corner of the button
overlayX: 'start', // left corner of the overlay to the origin
overlayY: 'bottom', // top corner of the overlay to the origin

// bottom-right
originX: 'end', // right corner of the button
originY: 'top', // top corner of the button
overlayX: 'end', // right corner of the overlay to the origin
overlayY: 'bottom', // top corner of the overlay to the origin