时间戳

首页 > 解决方案 > 将组件数据共享到 Angular Material 对话框

angular - 将组件数据共享到 Angular Material 对话框

问题描述

我想在打开对话框时显示特定的设备数据，但首先，我需要将device.key组件从我的组件传递给对话框组件，然后运行将获取设备数据的服务，让我向您展示代码：

列表设备.html：

  <ng-container matColumnDef="info">
    <th mat-header-cell *matHeaderCellDef><strong>Details</strong></th>
    <td mat-cell *matCellDef="let device; let i = index;">
      <button mat-mini-fab (click)="openDialog(device.key)" style="background-color: darkcyan;">
        <mat-icon>info</mat-icon>
      </button>
    </td>
  </ng-container>

列表设备.ts：

  openDialog(id: string){
    this.dialog.open(ListDialogComponent)
    console.log(id)
  }

列表设备dialog.ts：

  dataSource: any = [];

  constructor(
    public fb: FormBuilder,
    private location: Location,
    private deviceService: DeviceService,
    private actRoute: ActivatedRoute,
    private router: Router
  ) {
    this.deviceService.GetDevice(**the device key**).valueChanges().subscribe(data => {
      console.log(data);
      this.dataSource.push(data)
    })
  }

标签： angularfirebase-realtime-databaseangular-materialdialogdata-sharing

解决方案

openDialog(id: string){
  this.dialog.open(ListDialogComponent, {
      data: {id: id}
    });
  }

在对话框组件中

导入库

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

然后将其注入构造函数中，

 constructor(
    public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
    @Inject(MAT_DIALOG_DATA) public data: DialogData) {}

在这里你可以看到 => this.data 的值

推荐阅读