Comment puis-je passer une variable de service dans une boîte de dialogue Angular Material ?

Question

Pour mdDialog comment puis-je passer dans la variable ? Plus précisément, comment injecter un service Angular dans le composant de dialogue ?

Answer 1

Pour passer des variables, vous pouvez récupérer l'instance du composant ouvert dans le dialogue, à partir de l'instance MdDialogRef renvoyée par l'appel de la méthode MdDialog.open().

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

Pizza modifiée du docs github material2 Matériel angulaire doc

@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>) { }
}

Answer 2

Material2 beta.2

Le site dialog.open() prend un 2ème paramètre config ( MdDialogConfig ) où vous pouvez spécifier n'importe quel data objet.

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

Il vous suffit ensuite de récupérer cet objet dans le 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 : bêta.3

La réponse ci-dessus fonctionne pour la version 2.0.0-beta.2 du matériel2. Si vous utilisez 2.0.0-beta.3 le config a été supprimée de MdDialogRef . vous pouvez à la place injecter cette valeur en utilisant l'option MD_DIALOG_DATA du composant ouvert.

Nouvelles déclarations d'importation

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

DIALOGUE OUVERT

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

RÉCUPÉRER LES 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);
  }
}

Answer 3

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

Partage des 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 au composant de la boîte de dialogue.

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) { }
}

Answer 4

Voilà comment j'ai fait.

pizza.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class PizzaService {
    getTopping(): string {
        return "Mushrooms"
    }
}

pizzaDialog.component.ts

import { Component } from '@angular/core';
import { MdDialogRef} from '@angular/material';
import {PizzaService} from './pizza.service';

@Component({
    selector: 'pizza-dialog',
    template: `{{pizzaTopping}}
    <button type="button" (click)="dialogRef.close('yes')">Yes</button>
    <button type="button" (click)="dialogRef.close('no')">No</button>
  `,
    providers: [PizzaService]
})
export class PizzaDialog {
    pizzaTopping: string;

    constructor(public dialogRef: MdDialogRef<PizzaDialog>, private pizzaService: PizzaService) { };

    ngOnInit(): void {
        this.pizzaTopping = this.pizzaService.getTopping()
    }
}

Answer 5

Donner une réponse actualisée pour tenir compte de la mise à jour de "Md" à "Mat" :

• Cela suppose que vous avez déjà mis en place un dialogue avec succès et que vous cherchez maintenant à ajouter une entrée.
• Voici la solution lorsque vous rencontrez le problème suivant : @angular/material n'a pas de membre exporté 'MD_DIALOG_DATA'.

Pour ouvrir le dialogue avec des données, passez un objet de données :

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

Pour récupérer ces données dans votre boîte de dialogue :

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

export class YourDialogComponent {

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

    console.log('data passed in is:', this.data);
  }
}