web-dev-qa-db-fra.com

Comment puis-je passer une variable de service dans un dialogue Angular Material?

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

angularangular-materialangular-material2
38
ethan

Pour transmettre des variables, vous pouvez extraire l'instance du composant ouverte dans la boîte de dialogue, à partir de l'instance MdDialogRef renvoyée dans l'appel de méthode MdDialog.open ().

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

Pizza modifiée à partir de 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>) { }
}
55
poidar

Material2 beta.2

La fonction dialog.open() prend un second paramètre config ( MdDialogConfig ) où vous pouvez spécifier un objet data.

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

Vous pouvez alors simplement extraire cet objet du composant utilisé pour votre fenêtre de dialogue.

export class YourDialogComponent {

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

UPDATE: 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, la propriété config a été retirée de MdDialogRef. vous pouvez plutôt injecter cette valeur en utilisant le 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"
  }
});

RECUPERER DES DONNEES DE DialogRef composant

export class YourDialogComponent {

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

    console.log('data', this.data);
  }
}
39
ThiagoPXP

Parmi 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 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) { }
}
9
Flavien Volken

Voici comment je l'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()
    }
}
5
camden_kid

Pour donner une réponse mise à jour pour permettre la mise à jour de 'Md' à 'Mat':

  • Cela suppose que vous ayez déjà implémenté une boîte de dialogue et que vous cherchiez maintenant à ajouter une entrée.
  • C'est la solution lorsque vous rencontrez un problème pour lequel @ angular/material n'a pas de membre exporté 'MD_DIALOG_DATA'.

Pour ouvrir la boîte de dialogue avec des données, transmettez 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);
  }
}
3
William Hampshire