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

Posterior a investigar en diferentes repositorios y páginas webs al final nos encontramos con la respuesta que te mostramos más adelante.

Solución:

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

En tu Componente de diálogo:

export class DialogComponent 

  @Output() submitClicked = new EventEmitter();

  constructor(public dialogRef: MatDialogRef)

  saveMessage() 
    const data = 'Your data';
    this.submitClicked.emit(data);
  

  closeDialog() 
    this.dialogRef.close();
  

En tu Componente de la aplicación:

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 darse de baja rápidamente (si no hay validación de datos involucrada):

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

Además, siempre puede cerrar su cuadro de 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 aplicación en el mismo archivo.

// app.component.html  


  
a.name





 (click)="open(event, a)">edit 

// 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 ;

 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: `Edit Data
             
               
             
             

               Update Recipe
             
`,
 )

 export class EditDialog implements OnInit 

   dataItem: any;  

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

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

   ngOnInit() 
   

A. suscribirse a la afterClosed Observable de this.DialogRefpuede agregarlo después de llamar al this.DialogRef.open en app.component.ts Me gusta esto

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

B en dialog.component.ts importa el servicio MatDialog, así:

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

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

  constructor(public dialogRef: MatDialogRef,
    @Inject(MAT_DIALOG_DATA) public data: any) 

C en el saveMessage() método, llame al método de diálogo de cierre y pase el valor que necesita para volver 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 a la afterClosed diálogo observable

También eche un vistazo a los documentos de material angular de formulario de ejemplo completo

Salud

Si aceptas, tienes el poder dejar un post acerca de qué te ha gustado de este enunciado.

---

---

Utiliza Nuestro Buscador