Angular 组件之间的通信答案

【问题标题】：Communication between components AngularAngular 组件之间的通信
【发布时间】：2021-03-02 12:19:48
【问题描述】：

我正在使用 Angular 10 和 Angular Material（我是这个框架的初学者）。现在我有一个表格，里面有一些数据要显示给用户。当用户单击一个按钮时，必须向他显示一个模式。我已经有了模态，当用户单击按钮时它会出现，但是模态必须填充表格每一行的数据（每一行包含不同的数据）。我正在使用 mat-dialog 向用户显示模式。这里以包含表数据的数组为例：

const ELEMENT_DATA: PeriodicElement[] = [
  {invoice: 1, category: 'Hydrogen', description: 'Hi!', startDate: 'H', status: '1', see: ''},
  {invoice: 2, category: 'Helium', description: 'Hi!', startDate: 'He', status: '1', see: ''},
  {invoice: 3, category: 'Lithium', description: 'Hi!', startDate: 'Li', status: '1', see: ''},
  {invoice: 4, category: 'Beryllium', description: 'Hi!', startDate: 'Be', status: '1', see: ''},
  {invoice: 5, category: 'Boron', description: 'Hi!', startDate: 'B', status: '1', see: ''},
  {invoice: 6, category: 'Carbon', description: 'Hi!', startDate: 'C', status: '1', see: ''},
  {invoice: 7, category: 'Nitrogen', description: 'Hi!', startDate: 'N', status: '1', see: ''},
  {invoice: 8, category: 'Oxygen', description: 'Hi!', startDate: 'O', status: '1', see: ''},
  {invoice: 9, category: 'Fluorine', description: 'Hi!', startDate: 'F', status: '1', see: ''},
  {invoice: 10, category: 'Neon', description: 'Hi!', startDate: 'Ne', status: '1', see: ''},
];

这里是表格的视图：

当用户单击最后一个图标时，对话框出现，它必须包含该行包含的内容。问题是我无法将我的数据表组件与我的对话框示例组件进行通信。有没有办法将我的表格组件的数据传递给我的对话框组件？

非常感谢您的帮助！

PS。如果您需要更多上下文，请告诉我。

【问题讨论】：

标签： angular typescript angular-material components

【解决方案1】：

您可以将数据传递给对话框并使用@Inject(MAT_DIALOG_DATA) 来获取传递的数据。

const dialogConfig = new MatDialogConfig();

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

dialogConfig.data = {
    id: 1,
    title: 'Angular For Beginners'
};

在服务中使用 Subject 或 BehaviourSubject 的组件之间的通信。您可以下一步和订阅数据。

【讨论】：

【解决方案2】：

您可以按如下方式处理。首先你需要创建你的DialogComponent

TableDialogComponent.ts

export class TableDialogComponent implements OnInit {

  constructor(
    public dialogRef: MatDialogRef<TableDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public dialogData: any
  ) {}

  ngOnInit(): void {}

}

TableDialogComponent.html

<h2 mat-dialog-title>{{ dialogData.title }}</h2>
<mat-dialog-content class="mat-typography">
  <div>
      {{dialogData.message}} // here you can play with your data that you bind to the message property
  </div>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Done</button>
</mat-dialog-actions>

然后在您的用户表行按钮中单击您可以将您的元素传递给showDialog(element) 方法。其中element是你绑定的表数据

showDataDialog(data: any): void {
    const dialogRef = this.dialog.open(TableDialogComponent, {
      width: '350px',
      data: {
        title: `Table Title`,
        message: data, // Here you can send anything for your modal component
      },
    });

    dialogRef.afterClosed().subscribe((result) => {});
}

【讨论】：

嗨！首先，感谢您的回答。我正在尝试像数据一样，但我无法显示数据。 showDataDialog 中的数据显示未定义。你知道是什么原因造成的吗？
nvm，我已经看到导致未定义的原因。我已经接受了你的回答，非常感谢！

【解决方案3】：

我建议使用服务。服务是单例的，所以只有一个类（和数据）的副本在所有组件之间共享，我认为可以在这种情况下使用。

基本上，您可以定义或以某种方式将您的 ELEMENT_DATA 设置为服务。

所以您在该文件中有一个带有该变量的 MyService.ts。

然后您将您的服务注入到父组件和模态组件这两个组件中（这是通过组件配置上的 Providers 完成的）。

例子

myService : MyService

现在两个组件都可以访问

myService.ELEMENT_DATA

并且您可以确保始终引用相同的值。

【讨论】：