Для mdDialog, как мне передать переменную? В частности, как вводить угловую службу в компонент диалога?Как передать служебную переменную в диалоговое окно «Угловой материал»?
ответ
Для передачи переменных вы можете получить экземпляр компонента, открытого в диалоге, из Экземпляр 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>) { }
}
Вот как я это сделал.
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()
}
}
отвечает на вопрос, -как вызова службы в диалоговом окне, спасибо, именно то, что я искал –
Материал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);
}
}
Это выглядит как рекомендуемый способ. Но почему это должно быть предпочтительнее использования dialogRef.componentInstance? –
С моей точки зрения, речь идет о «разделении проблем». Компонент, открывающий диалог, не должен знать, как диалог работает внутри. Следовательно, он не должен устанавливать какие-либо свойства диалога напрямую. Диалог может, более предсказуемо, инициировать себя со всеми необходимыми данными в его конструкторе. – ThiagoPXP
Из официальных документов, представленных на 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) { }
}
Спасибо! Но что является недостатком использования dialogRef.componentInstance? –
Чтобы дать обновленный ответ для размещения для обновления из «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);
}
}
хихи, спасибо большое! Я только что опробовал ваше решение с помощью последней версии Angular, эта строка получила ошибку компиляции: dialogRef: MdDialogRef = this.dialog.open (PizzaDialog, config); Я исправил это следующим образом: let dialogRef: MdDialogRef = this.dialog.open (PizzaDialog, config); –
Я думаю, что ответ от ThiagoPXP (объект данных MdDialogConfig) действительно хорош и лучший способ передать данные в дочерний компонент, а затем установить дочерние переменные класса в конструкторе, см. Ниже – poidar