我试图从角度为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);
});
}
对话框-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})
}
}
对话框的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
数据。另外,我想知道如何禁用用户点击屏幕并退出对话框的选项。我希望用户按下按钮退出对话框。
答案 0 :(得分:4)
好的,我刚刚找到了该问题的解决方案:
<强>对话框-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);
});
}