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

将<{1}}的初始值设置为父组件提供的值：

shortName

创建“保存”处理程序：

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

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

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

从Angular4上的md-dialog获取数据

1 个答案: