MatDialog 相对于触发元素的位置答案

【问题标题】：MatDialog position relative to triggering elementMatDialog 相对于触发元素的位置
【发布时间】：2020-04-21 17:25:48
【问题描述】：

我有一个 matdialog，我试图相对于触发它的元素定位它。

mainComponent.ts

openDialog() {
const element = document.getElementById('btn');
const myDialog = this.dialog.open(DialogComponent, {
  width: '500px',
  height: '500px',
  data: {
    something,
    something: something
  },
  position: { top: `${element.top + 5}px`, right: `${element.right + 5}px` }
});

不幸的是，这不会使对话框靠近我的触发元素，它只是将它随机扔到网页上。

另外，我没有对话服务，也不打算创建一个。

有谁知道如何解决这个问题？

非常感谢！

【问题讨论】：

您能提供一个 Stackblitz 演示吗？

标签： angular modal-dialog positioning android-relativelayout

【解决方案1】：

使用 getBoundingClientRect

const element=document.getElementById('btn');
const rect=element?element.getBoundingClientRect():{top:0,left:0}
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
  width: '250px',
  data: {name: this.name, animal: this.animal},
  position:{top:(rect.top+5)+'px',left:(rect.left+5)+'px'}
});

注意，你也可以传递一个引用变量并使用

<button #bt mat-raised-button (click)="openDialog(bt)">Pick one</button>

//and 
openDialog(bt:any): void {
  const element=bt._elementRef.nativeElement
  const rect=element?element.getBoundingClientRect():{top:0,left:0}
  ...
}

见stackblitz

【讨论】：

这是我第一次尝试，但它不起作用，因为我有一些改变视口的缩放效果。
我认为你可以乘以一个因子，但我真的不知道

【解决方案2】：

对话框并非设计为相对于元素打开。 Overlay 将更适合您，因为它支持各种 Position 和 Scroll 策略。在您的情况下，您可以使用FlexibleConnectedPositionStrategy，例如：

const positionStrategy = this.overlay.position()
    .flexibleConnectedTo(someElement)
    .withDefaultOffsetX(10);

this.overlayRef = this.overlay.create({
    positionStrategy: positionStrategy
});

...

【讨论】：

根据这篇文章 (stackoverflow.com/questions/58757670/…) 似乎可以。但唯一的区别是我不想使用服务。
@blk 在您的示例中，使用了一个自定义对话框组件，该组件根据传递给它的元素定位自己。这不是使用对话框的自然方式，它就像一个 hack。最好使用专为此类用例设计的叠加层。