Возврат данных из MdDialog в Angular Материал 2

Я использую MdDialogModule для отображения окна диалога с полем ввода. Модаль открывается нормально, и я могу ввести текст в поле ввода и отправить, но при нажатии кнопки "Отправить" я хочу, чтобы данные в форме ввода возвращались к основному компоненту, который вызывал компонент "Диалог", а также закрывал диалоговое окно "Диалог".

Как мне это сделать? Я могу передавать данные в компонент MdDialog, но не нашел никакого ресурса о том, как вернуть данные в компонент из MdDialogComponent.

Код компонента My Dialog выглядит следующим образом:

import { Component, OnInit, InjectionToken, Inject } from '@angular/core';
import { MD_DIALOG_DATA, MdDialogRef } from "@angular/material";

@Component({
  selector: 'app-add-book',
  templateUrl: './add-book.component.html',
  styleUrls: ['./add-book.component.css']
})
export class AddBookComponent {

  constructor() { }

}

и метод в главном компоненте, вызывающем диалоговое окно, выглядит следующим образом. Теперь ответ не возвращается, он возвращает Undefined, поскольку я еще не понял его.

openCreateDialog() {
    let dialogRef = this.dialog.open(AddBookComponent)
      .afterClosed()
      .subscribe(response => {
        console.log(response);
      });
  }

Ответы

Ответ 1

Сначала вам нужно добавить MdDialogRef в компонент диалога

export class AddBookComponent {
  constructor(private dialogRef: MdDialogRef<AddBookComponent>) { }
}

Затем используйте dialogRef.close для возврата данных

save() {
  this.dialogRef.close({ data: 'data' });
}

Ответ 2

Спасибо за комментарий Гарри первым...

ниже приведен весь связанный скрипт

Компонент ts:

  let dialogRef = this.dialog.open(DataListDialogComponent, dialogConfig).afterClosed()
  .subscribe(response => {
    console.log(response);
  });

диалог ts:

    this.dialogRef.close({data:'data'});

Ответ 3

"Dialog.open" можно использовать для открытия компонента диалога.

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

Чтобы закрыть вы можете использовать ref.close().

Если вы хотите получить данные из диалогового окна, вы можете использовать ref.componentInstance.updatedSelectedArms, который является событием, инициируемым при необходимости

var ref = this.dialog.open(SelectLoadingArmComponent, {
  width: '500px',
  data: { 
    loadingArms: this.loadingArms, 
    selectedloadingArms: this.selectedloadingArms
  }
});

ref.componentInstance.updatedSelectedArms.subscribe(
  (data) => {
    console.log(data)
    ref.close()
  }
);

Ответ 4

это поможет Ссылка и очень легко попробовать свой собственный путь.