web-dev-qa-db-ja.com

Angular Material 2でMdDialogからデータを返す

MdDialogModuleを使用して、入力フィールドを含むダイアログウィンドウを表示しています。モーダルは正常に開いており、入力フィールドにテキストを入力して送信することができますが、送信ボタンをクリックすると、入力フォームのデータがダイアログコンポーネントを呼び出したメインコンポーネントに返され、ダイアログも閉じます。

どうすればいいですか？ MdDialogコンポーネントにデータを渡すことはできますが、MdDialogComponentからコンポーネントにデータを返す方法に関するリソースが見つかりませんでした。

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);
      });
  }
angulardialogangular-material2mddialog
16
Hisham Mubarak

まず、MdDialogRefをダイアログコンポーネントに追加する必要があります

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

次に、dialogRef.closeを使用してデータを返します

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

最初にハリーのコメントをありがとう...

以下は関連するスクリプト全体です

コンポーネントts：

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

ダイアログts：

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

「dialog.open」を使用して、ダイアログコンポーネントを開くことができます。

2番目のパラメーターを追加して、ダイアログコンポーネントに送信するデータを指定できます。これには、幅や高さなどの情報を含めることができます。

閉じるには、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()
  }
);
0
Rohan Shenoy