angular - 如何在mat-cell中获取数据并以对话框形式显示Angular 7？

Question

我正在尝试使 mat-cell 可单击并在 mat-dialog 内显示表单字段，并用 mat-cell 内的数据填充这些字段。

那是我拥有的当前显示，但我希望它位于单击它的 mat-cell 旁边。

这是stackblitz中的代码。 https://stackblitz.com/edit/angular-akbfr8

任何帮助都可以。谢谢。

Answer 1

您需要使用data配置对象上的属性将数据传递给模式。

let dialogRef = dialog.open(YourDialog, {
  data: { name: 'austin' },
});

然后，您可以通过将其注入 Modal 的构造函数来使用该数据，如下所示：

import {Component, Inject} from '@angular/core';
import {MAT_DIALOG_DATA} from '@angular/material';

@Component({
  selector: 'your-dialog',
  template: 'passed in {{ data.name }}',
})
export class YourDialog {
  constructor(@Inject(MAT_DIALOG_DATA) public data: { name: string }) { }
}

您可以在文档中阅读更多相关信息：https ://material.angular.io/components/dialog/overview#sharing-data-with-the-dialog-component-

---

要让对话框出现在打开它的单元格旁边，您需要设置对话框的位置。为此，将配置对象中的属性left和top属性定义position为单元格的右侧。

dialog.open(YourDialog, {
  position: {
    left: `${cellElement.offsetLeft + cellElement.offsetWidth}px`,
    top: `${cellElement.offsetTop + cellElement.offsetHeight}px`,
  }
})

我已经更新了你的 stackblitz 来演示这个行为。

堆栈闪电战