web-dev-qa-db-fra.com

Renvoyer les données de MdDialog dans Angular Material 2

J'utilise un MdDialogModule pour afficher une fenêtre de dialogue contenant un champ de saisie. Le modal s'ouvre très bien et je peux entrer du texte dans le champ de saisie et soumettre, mais en cliquant sur le bouton Soumettre, je veux que les données du formulaire d'entrée soient renvoyées au composant principal qui a appelé le composant Dialog et ferme également la boîte de dialogue .

Comment puis-je faire cela? Je peux transmettre des données au composant MdDialog, mais je n'ai trouvé aucune ressource sur la façon de renvoyer des données au composant à partir de MdDialogComponent.

Mon code de composant Dialog ressemble à ceci

import { Component, OnInit, InjectionToken, Inject } from '@angular/core';
import { MD_DIALOG_DATA, MdDialogRef } from "@angular/material";

@Component({
  selector: 'app-add-book',
  templateUrl: './add-book.component.html',
  styleUrls: ['./add-book.component.css']
})
export class AddBookComponent {

  constructor() { }

}

et la méthode du composant principal appelant la boîte de dialogue ressemble à ceci. Aucune réponse n'est retournée maintenant, elle renvoie Non défini car je ne l'ai pas encore compris.

openCreateDialog() {
    let dialogRef = this.dialog.open(AddBookComponent)
      .afterClosed()
      .subscribe(response => {
        console.log(response);
      });
  }
angulardialogangular-material2mddialog
16
Hisham Mubarak

Tout d'abord, vous devez ajouter MdDialogRef à votre composant de dialogue

export class AddBookComponent {
  constructor(private dialogRef: MdDialogRef<AddBookComponent>) { }
}

Utilisez ensuite dialogRef.close pour renvoyer les données

save() {
  this.dialogRef.close({ data: 'data' });
}
27
Harry Ninh

Merci pour le commentaire d'Harry d'abord ...

ci-dessous est l'ensemble du script connexe

Composant ts:

  let dialogRef = this.dialog.open(DataListDialogComponent, dialogConfig).afterClosed()
  .subscribe(response => {
    console.log(response);
  });

dialogue ts:

    this.dialogRef.close({data:'data'});
1
W Kenny

Le "dialog.open" peut être utilisé pour ouvrir le composant de dialogue.

Vous pouvez spécifier les données que vous souhaitez envoyer au composant de boîte de dialogue en ajoutant un deuxième paramètre. Cela peut contenir des informations telles que les documents de vérification de la largeur et de la hauteur pour en savoir plus.

Pour fermer, vous pouvez utiliser ref.close ().

Si vous voulez attendre des données de la boîte de dialogue, vous pouvez utiliser ref.componentInstance.updatedSelectedArms qui est un événement déclenché en cas de besoin

var ref = this.dialog.open(SelectLoadingArmComponent, {
  width: '500px',
  data: { 
    loadingArms: this.loadingArms, 
    selectedloadingArms: this.selectedloadingArms
  }
});

ref.componentInstance.updatedSelectedArms.subscribe(
  (data) => {
    console.log(data)
    ref.close()
  }
);
0
Rohan Shenoy