Для mdDialog, как мне передать переменную? В частности, как внедрить службу Angular в компонент диалога?
Как передать переменную службы в диалог Angular Material?
Ответ 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>) { }
}
Ответ 2
Материал2 beta.2
Функция dialog.open()
принимает второй параметр 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
Material2. Если вы используете 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);
}
}
Ответ 3
Из официальных документов, найденных на https://material.angular.io/components/dialog/overview
Обмен данными с компонентом Dialog.
Если вы хотите поделиться данными с вашим диалоговым окном, вы можете использовать параметр данных для передачи информации в компонент диалога.
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) { }
}
Ответ 4
Вот как я это сделал.
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
Чтобы дать обновленный ответ для обновления от "Md" до "Mat":
- Предполагается, что вы уже успешно создали диалог и теперь просто хотите добавить ввод
- Это решение, когда у вас возникла проблема: @ angular/material не имеет экспортированного члена 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);
}
}