4

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

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

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

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

4

1 回答 1

4

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

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

有关. _ _MD_DIALOG_DATA

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

public shortName: string

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

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

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

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

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

<button (click)="onSave()" md-button>Save</button>
于 2017-06-08T17:45:36.160 回答