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

Question

我试图从 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);
        });
      }

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

对话框结果.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 数据。此外，我想知道如何禁用用户点击屏幕并退出对话框的选项。我希望用户按按钮退出对话框。

Answer 1

好吧，我刚刚找到了该问题的解决方案:

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