將組件數據共享到 Angular Material 對話框

Question

我想在打開對話框時顯示特定的設備數據，但首先，我需要將device.key從我的組件傳遞到對話框組件，然后運行將獲取設備數據的服務，讓我向您展示代碼：

列表-device.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>

列表-device.ts：

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

列表設備對話框.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)
    })
  }

Answer 1

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 的值