Как передать данные в диалоговое окно angular материала 2

Ответ 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();
  }
}