MatDialog相对于触发元素的位置

Question

我有一个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` }
});

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

而且，我没有Dialog Service，也不想创建一个。

有人知道如何解决此问题吗？

非常感谢！

Answer 1

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

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

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

...

Answer 2

使用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