如何在按材质对话框打开时获取输入值

时间:2017-07-09 06:57:39

标签: angular angular-material

我正在尝试从“材料对话框”打开的输入中获取值。我在下面尝试但是值没有改变。

请参阅此plunker https://plnkr.co/edit/tiiMwvQTB4sbz5uTAByP?p=preview

import {Component} from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';

@Component({
  selector: 'dialog-result-example',
  templateUrl: 'dialog-result-example.html',
})
export class DialogResultExample {
  selectedOption: string;

  constructor(public dialog: MdDialog) {}

  openDialog() {
    let dialogRef = this.dialog.open(DialogResultExampleDialog);
    dialogRef.afterClosed().subscribe(result => {
      this.selectedOption = result;
      const dialogResultExampleDialog = new DialogResultExampleDialog()
      console.log(dialogResultExampleDialog.hero) <--- this value is not the changed value 
    });
  }
}

export class Hero {
  id: number;
  name: String
}

@Component({
  selector: 'dialog-result-example-dialog',
  templateUrl: 'dialog-result-example-dialog.html',
})
export class DialogResultExampleDialog {
  hero: Hero = {
    id: 1,
    name: "Hello"
  }
  constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}
}

1 个答案:

答案 0 :(得分:0)

如果要从对话框实例返回值,则应在对话框组件类中调用对话框实例关闭方法。

为此,我向close课程添加了DialogResultExampleDialog方法。此方法只需调用this.dialogRef.close(this.hero);

plunker