bekomme mehrere Daten aus dem Dialog mdl angular 2

Question

Ich versuche, Daten aus einem Dialog in Winkel 2 zu bekommen, aber es zeigt mir undefinierten Wert.

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); 
     }); 
     } 

dialog result.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}) 
    } 
} 

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> 

Mein Ziel newage und newname Daten aus dem Dialog zu erhalten ist. Außerdem möchte ich wissen, wie ich die Option für den Benutzer deaktivieren kann, um auf den Bildschirm zu tippen und den Dialog zu verlassen. Ich möchte, dass der Benutzer auf eine Schaltfläche drückt, um den Dialog zu verlassen.

Answer 1

Okay, ich gerade gefunden Lösung für dieses Problem:

dialog result.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:this.age,username:this.username}); 
    } 
} 

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 => { 


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