webentwicklung-frage-antwort-db.com.de

Wie kann ich eine Servicevariable an einen Angular Materialdialog übergeben?

Wie übergebe ich für mdDialog eine Variable? Wie kann ein Angular Service in die Dialogkomponente eingefügt werden?

38
ethan

Zum Übergeben von Variablen können Sie die im Dialogfeld geöffnete Instanz der Komponente aus der im Methodenaufruf MdDialog.open () zurückgegebenen MdDialogRef-Instanz abrufen.

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

Geänderte Pizza aus dem 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

Die Funktion dialog.open() verwendet einen zweiten Parameter config ( MdDialogConfig ), in dem Sie ein beliebiges Objekt data angeben können.

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

Sie können dieses Objekt dann einfach von der Komponente abrufen, die für Ihr Dialogfenster verwendet wird.

export class YourDialogComponent {

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

UPDATE: beta.3

Die Antwort oben funktioniert für die Version 2.0.0-beta.2 Von Material2. Wenn Sie 2.0.0-beta.3 Verwenden, wurde die Eigenschaft config aus MdDialogRef entfernt. Sie können diesen Wert stattdessen mit dem MD_DIALOG_DATA der geöffneten Komponente einfügen.

Neue Importanweisungen

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

DIALOG ÖFFNEN

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

RETRIEVE DATA FROM DialogRef component

export class YourDialogComponent {

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

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

Aus den offiziellen Dokumenten von https://material.angular.io/components/dialog/overview

Daten mit der Dialogkomponente teilen.

Wenn Sie Daten für Ihr Dialogfeld freigeben möchten, können Sie die Datenoption verwenden, um Informationen an die Dialogfeldkomponente zu übergeben.

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

Um auf die Daten in Ihrer Dialogkomponente zuzugreifen, müssen Sie das Injektionstoken MD_DIALOG_DATA verwenden:

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

So habe ich es gemacht.

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

So geben Sie eine aktualisierte Antwort für das Update von "Md" auf "Mat":

  • Dies setzt voraus, dass Sie bereits einen Dialog erfolgreich implementiert haben und nun nur noch eine Eingabe hinzufügen möchten
  • Dies ist die Lösung, wenn Sie ein Problem haben, bei dem @ angle/material kein exportiertes Mitglied 'MD_DIALOG_DATA' hat.

Um den Dialog mit Daten zu öffnen, übergeben Sie ein Datenobjekt:

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

So rufen Sie diese Daten in Ihrem Dialogfeld ab:

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