从 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 是我调用对话框的类上的一个变量，它不会更改该变量，我认为它会创建自己的范围，这就是它不使用我的类实例变量的原因。

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

Answer 1

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

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

有关MD_DIALOG_DATA 的一些解释，另请参阅Using MdDialogConfig data on Angular 2。

在对话框类中创建shortName 变量：

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>