Question

我实际上是在尝试了解重叠位置参数，但没有任何运气。我也找不到有关此主题的任何文档。

以下代码是什么意思？

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);

Answer 1

关于Angular Overlay CDK的文档还很少。我学到的大部分内容都来自他们的Github存储库。

全球排名策略

这将是一项全球定位战略。您创建的叠加层将直接放置在屏幕上，而不是相对于元素。这对于对话框弹出窗口或模式窗口很有用。

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

灵活连接策略

这就是您要用于工具栏，菜单以及从按钮弹出的内容的功能。您必须传递对您想要将覆盖层连接到的按钮的引用：

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

和您的Component.ts

showAppContext() {
  const appOverlayRef: AppOverlayRef = 
    this.appOverlayService.open(this.origin);
}

ConnectionPositionPair -这是首选职位的列表，从最高到最低。因此，它将首先尝试使用您传递的第一个位置。

originX：这将是“开始”，“结束”或“中心”。它是叠加层的连接点。如果已将按钮传递给.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

您可以将withPush设置为true，如果提供的位置都不适合，则会在屏幕上推送覆盖。

代码仍然是查看文档的最佳位置： https://github.com/angular/material2/blob/master/src/cdk/overlay/position/connected-position.ts

Answer 2

戴维·林克（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

角CDK了解覆盖位置系统

2 个答案: