web-dev-qa-db-fra.com

Comment communiquer du dialogue angular-material2 à son parent

J'ai le composant Parent qui ouvre une boîte de dialogue angular-material2. 

let dialogRef = this.dialog.open(Child, {
            disableClose: true
        });

dialogue ouvert Le composant Child a un bouton 'Ajouter'. Je souhaite notifier le composant `Parent 'si l'utilisateur clique sur le bouton' Ajouter '. 

Comment est-ce possible?

angulardialogangular-material2
9
Sunil Garg

J'ai utilisé EventEmitter pour renvoyer au conteneur parent

// dialog component
...
onAdd = new EventEmitter();

onButtonClick() {
  this.onAdd.emit();
}
...

et composant parent

// parent component
...
let dialogRef = this.dialog.open(Component);
const sub = dialogRef.componentInstance.onAdd.subscribe(() => {
  // do something
});
dialogRef.afterClosed().subscribe(() => {
  // unsubscribe onAdd
});
...

Voici la démo

http://plnkr.co/edit/KbE3uQi2zMNaZlZEEG5Z

Merci à thomaspink

13
Sunil Garg

Votre réponse est correcte mais cette chose est déjà mentionnée dans Angular2 Material Documentation d’une manière simple car vous pouvez utiliser la méthode subscribe à afterClosed de dialog Reference (dialogRef comme dans l’exemple) et vous obtiendrez la valeur de l’option sélectionnée à partir de l’argument de la méthode subscribe (Dans notre cas résultat ).

let dialogRef = this.dialog.open(DialogResultExampleDialog);
dialogRef.afterClosed().subscribe(result => {
  this.selectedOption = result;
});

Pour plus de détails, vous pouvez visiter ce lien https://material.angular.io/components/component/dialog et aller à Example Tab et essayer de comprendre un exemple simple.

10
Rohit Luthra

Avec "@ angular/material": "~ 7.0.0" componentInstance n'existe plus sur MatBottomSheetRef.

Il a été remplacé par instance

Implémentation parent: 

let dialogRef = this.dialog.open(Component);
const sub = dialogRef.instance.onAdd.subscribe(() => {
  // do something
});
1
Adrien Castagliola

Si le parent est un service, vous pouvez communiquer via ce service. 

Toutefois, vous rencontrerez des problèmes de référence circulaires s’ils se réfèrent tous les deux. Vous pouvez utiliser le paramètre data à la place lorsque vous ouvrez la boîte de dialogue pour lui transmettre le "parent" (j'aime le faire via une interface).

Ainsi, dans le composant lorsque vous injectez MAT_DIALOG_DATA, vous pouvez le spécifier en tant qu’interface donnée.

  @Inject(MAT_DIALOG_DATA) public data: IMainMenuDialogData

Puis définissez cela pour tout ce que vous passez.

export interface IMainMenuDialogData
{
    mainMenuService: MainMenuService;
}

Dans le composant 'parent', vous le transmettez via la propriété data

this.dialogRef.next(this.dialog.open(MainMenuDialogComponent, {
        width: '100vw',
        height: '100%',
        data: <IMainMenuDialogData> { mainMenuService: this }  ....

Si vous n'aimez pas transmettre l'intégralité du service, vous pouvez transmettre des observables spécifiques, des propriétés ou tout ce dont vous avez besoin.

0
Simon_Weaver