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);
});
}
まず、MdDialogRef
をダイアログコンポーネントに追加する必要があります
export class AddBookComponent {
constructor(private dialogRef: MdDialogRef<AddBookComponent>) { }
}
次に、dialogRef.close
を使用してデータを返します
save() {
this.dialogRef.close({ data: 'data' });
}
最初にハリーのコメントをありがとう...
以下は関連するスクリプト全体です
コンポーネントts:
let dialogRef = this.dialog.open(DataListDialogComponent, dialogConfig).afterClosed()
.subscribe(response => {
console.log(response);
});
ダイアログts:
this.dialogRef.close({data:'data'});
「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()
}
);