Как передать служебную переменную в диалоговое окно «Угловой материал»?

Question

Для mdDialog, как мне передать переменную? В частности, как вводить угловую службу в компонент диалога?

Answer 1

Для передачи переменных вы можете получить экземпляр компонента, открытого в диалоге, из Экземпляр MdDialogRef возвращен в вызове метода MdDialog.open().

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

Модифицированный Пицца из 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>) { } 
} 

Answer 2

Вот как я это сделал.

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 3

Материал2 beta.2

dialog.open() функция принимает 2-й параметр config (MdDialogConfig), где вы можете задать любой data объект.

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

Затем вы можете просто извлечь этот объект из компонента, который используется для вашего диалогового окна.

export class YourDialogComponent { 

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

UPDATE: beta.3

Ответ выше работ по версии 2.0.0-beta.2 от Материал2. Если вы используете 2.0.0-beta.3, свойство config было удалено с MdDialogRef. вы можете вместо этого ввести это значение с помощью MD_DIALOG_DATA открытого компонента.

Новые операторы импорта

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

ОТКРЫТЫЙ ДИАЛОГ

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

ПОЛУЧИТЬ ДАННЫЕ ИЗ DialogRef компонента

export class YourDialogComponent { 

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

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

Answer 4

Из официальных документов, представленных на https://material.angular.io/components/dialog/overview

Обмен данными с помощью компонента «Диалог».

Если вы хотите обмениваться данными с вашим диалоговым окном, вы можете использовать параметр данных для передачи информации в компонент диалога.

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

Чтобы получить доступ к данным в диалоговой компоненте, вы должны использовать инъекции маркер 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 5

Чтобы дать обновленный ответ для размещения для обновления из «Md» к «Мату» :

• Это предполагает, что вы уже есть диалог успешно реализован и теперь просто хотите добавить входной
• Это решение, когда вы возникает вопрос, что @ угловой/материал не имеет экспортированного элемента «MD_DIALOG_DATA»

Чтобы открыть диалоговое окно с данными, передать объект данных:

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

Чтобы получить эти данные в вашем диалоге:

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