Angular CDK 了解叠加位置系统

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 存储库。

全球定位策略

这将是一个全球定位策略。您正在创建的叠加层将直接定位在屏幕上，而不是相对于元素。这对于弹出对话框或模式 window.

很有用

  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：这将是 'start'、'end' 或 'center'。它是叠加层的附着点。如果您已将按钮传递给 .flexibleConnectedTo 函数，则这是指该元素的开始、结束和中心。

originY：这将是 'top'、'bottom' 或 'center'。这是指传入的元素的顶部、底部或中心。

所以 { 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，如果 none 个提供的位置适合，这将在屏幕上推送叠加层。

代码还是看文档最好的地方： https://github.com/angular/material2/blob/master/src/cdk/overlay/position/connected-position.ts

Answer 2

经过几天又几天的反复试验，David Rinck 对这个问题的回答对我有所帮助，所以我认为我会 post 作弊 sheet 我基于此整理出来，希望将来可能会对某人有所帮助。

这可能不适合所有人，但对我有帮助：

// 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

Answer 3

David Rinck 回答得很好，最终对我有用的是直接使用模板指令，甚至没有进入 typescript 覆盖引用（overlay.postition / 手动 attaching/detaching 等）。

这是一个示例，我在其中创建了一个位于我拥有的按钮下方的模式。它在没有明确设置位置的情况下表现得很奇怪，所以我不得不实现位置数组。

html:

<button cdkOverlayOrigin
        #trigger="cdkOverlayOrigin"
        (click)="isOpen = true">
  View Menu
</button>


<ng-template
    [cdkConnectedOverlayPanelClass]="'pm-responsive-text'"
    *ngIf="filterGroup?.filters?.length > numberOfVisibleFilters"
    cdkConnectedOverlay
    cdkConnectedOverlayPush ----- this pushes things on screen
    [cdkConnectedOverlayPositions]="positionPairs"
    [cdkConnectedOverlayOrigin]="filterTrigger"
    [cdkConnectedOverlayOpen]="isOpen"
    [cdkConnectedOverlayHasBackdrop]="true"
    (backdropClick)="isOpen = false">
    <div>...my modal code....</div>
</ng-template>

ts:

 // from my testing it doesn't seem to want to switch positions when 
 // resizing so I went ahead and just set it to the position I wanted and 
 // relied on cdkConnectedOverlayPush to handle the rest
positionPairs: ConnectionPositionPair[] = [
    {
      offsetX: 0,
      offsetY: 165,
      originX: 'start',
      originY: 'bottom',
      overlayX: 'start',
      overlayY: 'bottom',
      panelClass: null,
    },
  ];

Angular CDK 了解叠加位置系统

Angular CDK understanding the overlay position system

angular

angular-cdk