Angular CDK了解叠加位置系统

全球定位战略

这将是一个全球定位战略.您正在创建的叠加层将直接定位在屏幕上,而不是与元素相关.这适用于对话框弹出窗口或模态窗口.

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函数,则表示该元素的开始,结束和中心.

originY：这将是“顶部”,“底部”或“中心”.这指的是传入元素的顶部,底部或中心.

所以{originX：’start’,originY：’bottom’}将是按钮的左下角.

overlayX和overlayY具有相同的选项,但请参考叠加层的附加位置. {overlayX：’start’,overlayY：’top’}将叠加层的左上角附加到我们指定的原点.

然后,正如你在数组中看到的那样,我们可以传入多个位置.如果叠加不适合第一个位置,它将尝试数组中的下一个位置.因此,如果叠加层在第一路上不适合屏幕,它将自动切换到第二个位置,这里定义为将底部的左上角连接到叠加层的左下角.

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

withPush

您可以将withPush设置为true,如果所提供的位置都不合适,它将在屏幕上推送叠加.

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