angular - 如何在 Mat 表中每一行的按钮单击事件下设置对话框的位置？

Question

这是我的示例代码。我在这里创建了代码，请在此处查看我的工作代码

我试图为一个对话框设置一个位置

dialogConfig.position = { top: '370px',left: '500px'}

但是对于每一行，它都在相同的位置打开。

在这里，我需要在 Change Request 按钮的每一行下打开一个对话框。

以下代码用于对话框

openDialog(Id, Currency, Amount, Reason, StatusDescription, payment) {
const dialogConfig = new MatDialogConfig();

dialogConfig.disableClose = true;
dialogConfig.autoFocus = true;

dialogConfig.data = {
  Id: Id,
  Reason: Reason,
  StatusDescription: StatusDescription
};
 dialogConfig.position =  {
    top: '370px',
    left: '500px'
  }


const dialogRef = this.dialog.open(EditingDialogComponent, dialogConfig);
dialogRef.afterClosed().subscribe(
  data => {
    console.log("Dialog output:", data)
   
  }
);

}

Answer 1

我假设您想在打开它的按钮下方显示对话框。这可以通过使用按钮坐标定位对话框来完成。

我们可以通过使用事件监听器提供的事件参数来做到这一点。只需在视图文件中 openDialog 函数调用的开头添加 $event 并在 openDialog 的函数定义中添加事件参数。我们可以通过使用获取元素的相对视口位置event.target.getBoundingClientRect()。这将具有目标元素（在我们的例子中为按钮）的 x,y 坐标以及宽度和高度。您可以使用 x 和 y 坐标作为对话框配置的值。

这已在以下 URL 中完成

https://stackblitz.com/edit/angular-zw5byw?file=src/app/payments/payments.component.ts

我使用了宽度和高度属性（以及一些常量）来围绕按钮移动对话框。随意根据您的需要进行调整