Comment puis-je passer une variable de service dans un dialogue de matériau angulaire?

mdDialog<!-- 2-Comment passer dans variable? Plus précisément, comment injecter un service angulaire dans le composant de dialogue?

31
demandé sur isherwood 2016-11-17 09:40:04

5 réponses

pour passer des variables, vous pouvez saisir l'instance du composant ouvert dans la boîte de dialogue, à partir de L'instance MdDialogRef retournée dans le fichier MdDialog.la méthode open() de l'appel.

dialogRef = this.dialog.open(PizzaDialog, config)
dialogRef.componentInstance.<property_name>

Pizza modifiée de la GitHub material2 docs

@Component({
  selector: 'pizza-component',
  template: `
  <button type="button" (click)="openDialog()">Open dialog</button>
  `
})
export class PizzaComponent {

  constructor(public dialog: MdDialog) { }

  openDialog() {
    let config = new MdDialogConfig();
    let dialogRef:MdDialogRef<PizzaDialog> = this.dialog.open(PizzaDialog, config);
    dialogRef.componentInstance.name = "Ham and Pineapple";
    dialogRef.componentInstance.size = "Large";
  }
}

@Component({
  selector: 'pizza-dialog',
  template: `
  <h2>{{name}}</h2>
  <p>Size: {{size}}</p>
  <button type="button" (click)="dialogRef.close('yes')">Yes</button>
  <button type="button" (click)="dialogRef.close('no')">No</button>
  `
})
export class PizzaDialog {
  name:string;
  size:string;
  constructor(public dialogRef: MdDialogRef<PizzaDialog>) { }
}
40
répondu poidar 2017-03-22 10:37:17

Material2 beta.2

dialog.open() la fonction prend un second paramètre config (MdDialogConfig) où vous pouvez spécifier n'importe quel data objet.

this.dialog.open(YourComponent, {
  data: {
    anyProperty: "myValue"
  }
});

vous pouvez alors simplement récupérer cet objet à partir du composant utilisé pour votre fenêtre de dialogue.

export class YourDialogComponent {

  constructor(public dialogRef: MdDialogRef<YourComponent>) {
    console.log('data', this.dialogRef.config.data);
  }
}

mise à jour: beta.3

La réponse ci-dessus fonctionne pour la version 2.0.0-beta.2 de Material2. Si vous utilisez 2.0.0-beta.3, le config la propriété a été retirée de MdDialogRef. vous pouvez à la place injecter cette valeur en utilisant le MD_DIALOG_DATA du composant ouvert.

Nouveau déclarations d'importation

import {MdDialog, MdDialogRef, MdDialogConfig, MD_DIALOG_DATA} from '@angular/material';

DIALOGUE OUVERT

this.dialog.open(YourComponent, {
  data: {
    anyProperty: "myValue"
  }
});

EXTRAIRE DES DONNÉES DE DialogRef composant

export class YourDialogComponent {

  constructor(
    public dialogRef: MdDialogRef<YourDialogComponent>,
    @Inject(MD_DIALOG_DATA) public data: any) {

    console.log('data', this.data);
  }
}
37
répondu ThiagoPXP 2017-04-20 01:42:41

D'après les documents officiels trouvés sur https://material.angular.io/components/dialog/overview

partage de données avec le composant Dialog.

Si vous souhaitez partager des données avec votre boîte de dialogue, vous pouvez utiliser l'option de données pour transmettre des informations à la boîte de dialogue composants.

let dialogRef = dialog.open(YourDialog, {
  data: 'your data',
});

pour accéder aux données de votre composant de dialogue, vous devez utiliser le jeton D'injection MD_DIALOG_DATA:

import {Component, Inject} from '@angular/core';
import {MD_DIALOG_DATA} from '@angular/material';

@Component({
  selector: 'your-dialog',
  template: 'passed in {{ data }}',
})

export class YourDialog {
  constructor(@Inject(MD_DIALOG_DATA) public data: any) { }
}
8
répondu Flavien Volken 2017-06-24 19:50:46

Voici comment je l'ai fait.