Совместное использование данных компонента в Angular Material Dialog - PullRequest
Новая
       163

Совместное использование данных компонента в Angular Material Dialog

0 голосов
/ 12 марта 2020

Я хочу показать определенные данные устройства c при открытии диалогового окна, но сначала мне нужно передать device.key из моего компонента в компонент диалога, а затем запустить службу, которая будет получать данные устройства Позвольте мне показать вам код:

list-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>

list-device.ts: 

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

list-device- 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)
    })
  }

1 Ответ

0 голосов
/ 12 марта 2020 
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

...