¿Cómo comunicarse desde el componente de diálogo de tapete al componente donde se implementa el diálogo de tapete?

Solución:

De hecho, puede lograr la comunicación utilizando suscripción para @Output mediante MatDialogRef<EditDialog>. Para algunos escenarios, es posible que deba obtener los datos de un cuadro de diálogo antes de que se cierre. Por tanto, no podemos hacer uso de la this.DialogRef.afterClosed() función ya que tenemos que cerrar el diálogo primero para obtener los datos.

En tu DialogComponent:

export class DialogComponent {

  @Output() submitClicked = new EventEmitter<any>();

  constructor(public dialogRef: MatDialogRef<DialogComponent>){}

  saveMessage() {
    const data="Your data";
    this.submitClicked.emit(data);
  }

  closeDialog() {
    this.dialogRef.close();
  }
}

En tu AppComponent:

addItem() {
    this.DialogRef = this.dialog.open(DialogComponent);
    this.DialogRef.componentInstance.submitClicked.subscribe(result => {
        console.log('Got the data!', result);

    });
}

Mejor asegúrate de unsubscribe() todo tu Subscriptions. Algo como esto servirá para cancelar la suscripción rápidamente (si no hay validación de los datos involucrados):

const dialogSubmitSubscription = this.DialogRef.componentInstance.submitClicked
    .subscribe(result => {
      console.log('Got the data!', result);
      dialogSubmitSubscription.unsubscribe();
    });

Además, siempre puede cerrar su diálogo desde el AppComponent con this.DialogRef.close() si usted tiene que.

Un escenario de caso de uso si desea editar algunos datos en un cuadro de diálogo y luego pasar los datos editados al componente desde el cuadro de diálogo. Usé el ejemplo anterior, pero consolidé la respuesta para que sea más fácil de seguir. Suponiendo que los datos provienen de un servicio, este ejemplo comparte datos de un componente mat-dialog con un componente de la aplicación en el mismo archivo.

// app.component.html  

<div *ngFor="let a of appData">
  <p>{{a.name}}</p>
<button> (click)="open(event, a)">edit</button> 
</div>

// app.component.ts    

import { Component, Inject, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
 appData: Array <any>;

 constructor(private dataService: DataService, public dialog: MatDialog) {}

 ngOnInit() {

   this.dataService.getData()
    .subscribe(res => { 
      //console.log(res);
      this.appData = res;
   })
 }

public open(event, data) {
  this.dialog.open(EditDialog, {
    data: data,
}).afterClosed()
  .subscribe(item => {
    // Edited Data sent to App Component from Dialog 
    console.log(item);
  });
 }
}

@Component({
  selector: 'edit-dialog',
  template: `<span>Edit Data</span>
             <mat-dialog-content>
               <input matInput name="title" type="text" class="form-control" placeholder="Edit Name" [(ngModel)]="dataItem.name">
             </mat-dialog-content>
             <div>
               <span><button mat-raised-button (click)="updateData()">Update Recipe</button></span>
             </div>`,
 })

 export class EditDialog implements OnInit {

   dataItem: any;  

   constructor(public dialogRef: MatDialogRef <EditDialog> , @Inject(MAT_DIALOG_DATA) public data: any, private dataService: DataService) {
     this.dataItem = this.data;
   }

   public updateData() {
     this.dialogRef.close(this.dataItem);
   }

   ngOnInit() {
   }
}

A. suscribirse al afterClosed Observable de this.DialogRef, puede agregarlo después de llamar al this.DialogRef.open in app.component.ts Como esto

  addItem() {
    this.DialogRef = this.dialog.open(DialogComponent);
    this.DialogRef.afterClosed()
    .subscribe(return => console.log(return));
  }

B. En dialog.component.ts importar el servicio MatDialog, así:

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

C.Asegúrese de que dialogRef se pase a su constructor de diálogo de esta manera

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

C. En el saveMessage() , llame al método de diálogo de cierre y pase el valor que necesita para devolver al componente de la aplicación.

  saveMessage() {
    this.dialogRef.close('hello data');
  } 

D. El componente de la aplicación recibirá el valor porque se suscribe al afterClosed diálogo observable

También eche un vistazo al ejemplo completo de documentos de material angular

Salud

---

---

Utiliza Nuestro Buscador