从 Angular4 上的 md-dialog 获取数据

Question

我正在 Angular 4 应用程序上实施 md-dialag from Material Design。我目前已经实现了将数据传递到模式中，但未能成功检索用户在对话框中输入的任何数据。

这是我打开对话框的方式：

ShowAddStop() {
    this.general = {fc: this.locationCtrl, fl: this.filteredLocations, selectedNewStop:this.selectedNewStop};
    let dialogRef = this.dialog.open(DialogAddStop,{data:this.general});
    dialogRef.afterClosed().subscribe(result => {
        console.log(result);
    });
}

但是例如，在对话框中我有一个我希望用户填写的输入字段：

<input [(ngModel)]="ShortName">

其中 Shortname 是我调用对话框的 class 上的一个变量，它不会更改该变量，我认为它创建了自己的范围，这就是为什么它不使用我的 class实例变量。

在从对话框中检索数据时，我是否缺少一些基本的东西？

Answer 1

首先，在对话框构造函数中获取一个MdDialogRef<DialogAddStop>引用和一个MD_DIALOG_DATA标记：

constructor(
  @Inject(MD_DIALOG_DATA) private dialogData: any,
  private dialogRef: MdDialogRef<DialogAddStop>
) {}

有关 MD_DIALOG_DATA 的一些解释，另请参阅。

在对话框中创建一个shortName变量class:

public shortName: string

将shortName的初始值设置为父组件提供的值：

public ngOnInit(): void {
  this.shortName = this.dialogData['shortName']
}

创建一个“保存”处理程序：

public onSave() {
  this.dialogRef.close(this.shortName)
}

将处理程序附加到保存按钮：

<button (click)="onSave()" md-button>Save</button>

从 Angular4 上的 md-dialog 获取数据

Get data from md-dialog on Angular4

angular2-services

mddialog

angular