从对话框mdl angular 2获取多个数据

我试图从angular 2中的对话框中获取数据，但它显示了未定义的值

dialog.component.ts

    import { Component } from '@angular/core';
    import { MdDialog, MdDialogRef } from '@angular/material';
    import { DialogResultComponent } from '../dialog-result/dialog-result.component';

    @Component({
      selector: 'app-dialog',
      templateUrl: './dialog.component.html'
    })
    export class DialogComponent {
      NewAge: string;
      newName: string;

      constructor(public dialog: MdDialog) {}
      ngOnInit() {
        //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
        //Add 'implements OnInit' to the class.
         const dialogRef = this.dialog.open(DialogResultComponent);
        dialogRef.afterClosed().subscribe(result => {

          // how to retrieve multiple data?
          this.NewAge = result.age;
          this.newName = result.name;
          console.log(this.newName + this.NewAge);
        });
      }

对话框结果.component.ts

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

@Component({
  selector: 'app-dialog-result',
  templateUrl: './dialog-result.component.html',
})
export class DialogResultComponent {
  constructor(public dialogRef: MdDialogRef<DialogResultComponent>) {}
  age:string;
  username:string;
  saveData(){
  this.dialogRef.close({age,username})
  }
}

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

@Component({
  selector: 'app-dialog-result',
  templateUrl: './dialog-result.component.html',
})
export class DialogResultComponent {
  constructor(public dialogRef: MdDialogRef<DialogResultComponent>) {}
  age:string;
  username:string;
  saveData(){
  this.dialogRef.close({age:this.age,username:this.username});
  }
}

    import { Component } from '@angular/core';
import { MdDialog, MdDialogRef } from '@angular/material';
import { DialogResultComponent } from '../dialog-result/dialog-result.component';

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html'
})
export class DialogComponent {
  NewAge: string;
  newName: string;

  constructor(public dialog: MdDialog) {}
  ngOnInit() {
    //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
    //Add 'implements OnInit' to the class.
     const dialogRef = this.dialog.open(DialogResultComponent);
    dialogRef.afterClosed().subscribe(result => {


      this.NewAge = result.age;
      this.newName = result.username;
      console.log(this.newName + this.NewAge);
    });
  }

从'@angular/core'导入{Component，OnInit}；
从“@angular/material”导入{MdDialog，MdDialogRef}；
@组成部分({
选择器：“应用程序对话框结果”，
templateUrl:“./dialog result.component.html”，
})
导出类对话框ResultComponent{
构造函数（公共dialogRef:MdDialogRef）{}
年龄：弦；
用户名：字符串；
saveData（）{
this.dialogRef.close（{age，username}）
}
}

dialog-result.html

      <h3 class="mdl-dialog__title">Edit User</h3>
  <div class="mdl-dialog__content">
            <mdl-textfield type="text" label="Username" [(ngModel)]="userName" floating-label autofocus></mdl-textfield>
            <mdl-textfield type="text" label="Username" [(ngModel)]="age" floating-label autofocus></mdl-textfield>
  </div>
  <div class="mdl-dialog__actions">
    <button mdl-button (click)="saveData()" mdl-button-type="raised" mdl-colored="primary" mdl-ripple>Save</button>
    <button mdl-button (click)="dialogRef.close(dd)" mdl-button-type="raised" mdl-ripple>Cancel</button>
  </div>

编辑用户
拯救
取消

---

我的目标是从对话框中获取

newage

和

newname

数据。此外，我想知道如何禁用用户点击屏幕并退出对话框的选项。我希望用户按下按钮退出对话框。

好的，我刚刚找到解决该问题的方法：

对话框结果.component.ts

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

@Component({
  selector: 'app-dialog-result',
  templateUrl: './dialog-result.component.html',
})
export class DialogResultComponent {
  constructor(public dialogRef: MdDialogRef<DialogResultComponent>) {}
  age:string;
  username:string;
  saveData(){
  this.dialogRef.close({age,username})
  }
}

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

@Component({
  selector: 'app-dialog-result',
  templateUrl: './dialog-result.component.html',
})
export class DialogResultComponent {
  constructor(public dialogRef: MdDialogRef<DialogResultComponent>) {}
  age:string;
  username:string;
  saveData(){
  this.dialogRef.close({age:this.age,username:this.username});
  }
}

    import { Component } from '@angular/core';
import { MdDialog, MdDialogRef } from '@angular/material';
import { DialogResultComponent } from '../dialog-result/dialog-result.component';

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html'
})
export class DialogComponent {
  NewAge: string;
  newName: string;

  constructor(public dialog: MdDialog) {}
  ngOnInit() {
    //Called after the constructor, initializing input properties, and the first call to ngOnChanges.
    //Add 'implements OnInit' to the class.
     const dialogRef = this.dialog.open(DialogResultComponent);
    dialogRef.afterClosed().subscribe(result => {


      this.NewAge = result.age;
      this.newName = result.username;
      console.log(this.newName + this.NewAge);
    });
  }