Как передать данные в диалоговое окно angular материала 2
Я использую диалоговое окно углового материала2.
Я хочу передать данные в открытый компонент. Вот как я открываю диалоговое окно по нажатию кнопки
let dialogRef = this.dialog.open(DialogComponent, {
disableClose: true,
data :{'name':'Sunil'}
});
На странице документации есть свойство data, но я проверил MdDialogConfig в моих установленных пакетах
/**
* Configuration for opening a modal dialog with the MdDialog service.
*/
export declare class MdDialogConfig {
viewContainerRef?: ViewContainerRef;
/** The ARIA role of the dialog element. */
role?: DialogRole;
/** Whether the user can use escape or clicking outside to close a modal. */
disableClose?: boolean;
/** Width of the dialog. */
width?: string;
/** Height of the dialog. */
height?: string;
/** Position overrides. */
position?: DialogPosition;
}
в классе конфигурации нет свойства данных.
Теперь, как я могу получить доступ к этим переданным данным?
Ответы
Ответ 1
ОБНОВЛЕНИЕ 2 (Угловой 5+)
Этот ответ довольно устарел. Взгляните на эпифанатический ответ.
ОБНОВИТЬ
Вы можете использовать dialogRef.componentInstance.myProperty = 'some data'
чтобы установить данные для вашего компонента.
Вам нужно что-то вроде этого:
let dialogRef = this.dialog.open(DialogComponent, {
disableClose: true,
});
dialogRef.componentInstance.name = 'Sunil';
Затем в вашем DialogComponent
вам нужно добавить name property
:
...
@Component({
...
})
export class DialogComponent {
public name: string;
...
}
Текст ниже недействителен в новых версиях @angular/material
Я не нашел никакой документации по этому вопросу, поэтому я тоже начал изучать исходный код. Из-за этого это не может быть официальным способом сделать.
Я успешно dialogRef._containerInstance.dialogConfig.data
данные в dialogRef._containerInstance.dialogConfig.data
;
Так что вы можете сделать, например,
let name = dialogRef._containerInstance.dialogConfig.data.name;
console.log(name); // Sunil
Ответ 2
Для самой новой версии диалога (это до Angular 5, для 5 см. Обновление ниже), вы можете сделать следующее, чтобы передать данные через конфигурацию, которая намного проще и чище.
Когда вы открываете диалоговое окно, вы можете сделать это следующим образом, добавив данные в качестве параметра конфигурации (просто игнорируйте ширину и высоту, которые есть в целях иллюстрации):
this.dialogRef = this.dialog.open(someComponent, {
width: 330px,
height: 400px,
data: {
dataKey: yourData
}
});
Затем в компоненте, который открывается в диалоговом окне, вы можете получить к нему доступ следующим образом:
import {MD_DIALOG_DATA} from '@angular/material';
import { Inject } from '@angular/core';
constructor(
@Inject(MD_DIALOG_DATA) public data: any
) { }
ngOnInit() {
// will log the entire data object
console.log(this.data)
}
Или вы можете использовать доступ к нему в шаблоне или другими методами, но вы получите точку.
ОБНОВЛЕНИЕ для Angular 5
Все в материале было изменено с Md на Mat, так что если на Angular 5, импортируйте как:
import {MAT_DIALOG_DATA} from '@angular/material'
Затем залить
@Inject(MAT_DIALOG_DATA) public data: any
Ответ 3
Я подумал, что смогу дать более полный ответ тем из нас, кто еще учится:
В отличие от примеров материалов, я настроил диалоговое окно на наличие собственных файлов компонентов (html, css и ts) для простоты отладки.
Файл основного компонента "x.component.ts" (вызов диалогового окна)
1) добавить оператор импорта
import { MatDialog} from '@angular/material';
2) добавить свойство в параметры конструктора
public dialog: MatDialog
3) определить код для вызова диалогового окна
openDialog(title: string, text: string): void {
const dialogRef = this.dialog.open(DialogComponent, {
width: '350px',
data: {dialogTitle: title, dialogText: text}
);
dialogRef.afterClosed().subscribe(result => {
});
const dialogSubmitSubscription =
dialogRef.componentInstance.submitClicked.subscribe(result => {
dialogSubmitSubscription.unsubscribe();
});
}
Вызовите функцию из вашего html файла с помощью openDialog(). Я ссылаюсь на DialogComponent, поэтому убедитесь, что он импортирован в ваш модуль.
import { DialogComponent } from './dialog/dialog.component';
также
entryComponents: [DialogComponent]
объявите это в вашем массиве entryComponents
4) в своем файле dialog.component.ts добавьте импорт
import { Component, Output, EventEmitter, Inject, OnInit} from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
5) определить свойства & функции
dialogTitle: string;
dialogText: string;
@Output() submitClicked = new EventEmitter<any>();
constructor(
public dialogRef: MatDialogRef<DialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: DialogData) {}
ngOnInit() {
this.dialogTitle = this.data.dialogTitle;
this.dialogText = this.data.dialogText;
}
saveMessage() {
const data = 'Your data';
this.submitClicked.emit(data);
this.dialogRef.close();
}
closeDialog() {
this.dialogRef.close();
}
6) и, наконец, HTML
<h1 mat-dialog-title>{{dialogTitle}}"</h1>
<div mat-dialog-content>
<p>{{dialogText}}</p>
</div>
<div mat-dialog-actions>
<button mat-button (click)="saveMessage()" >Ok</button>
<button mat-button (click)="closeDialog()" cdkFocusInitial>No Thanks</button>
</div>
Надеюсь, это поможет.
Ответ 4
Поэтому я добавил метод, и он работает на одном компоненте, но если я хочу создать диалоговое окно (другой компонент), он не работает
компонент таблицы и кнопка удаления
openDeleteDialog(user) {
this.dialog.open(DeleteUserDialogComponent, {
width: '30%', disableClose: true, data: user
});
}
Диалоговое окно компонента
export class DeleteUserDialogComponent {
dataSource = new MatTableDataSource();
constructor(public dialog: MatDialog, public dialogRef: MatDialogRef<DeleteUserDialogComponent>, private userService: UserService, @Inject(MAT_DIALOG_DATA) public data: any) {}
deleteUser() {
this.dataSource.data.splice(this.dataSource.data.indexOf(this.data), 1);
this.dataSource.data = [...this.dataSource.data];
console.log(this.dataSource.data);
console.log(this.data)
}
click(): void {
this.dialogRef.close();
}
}