如何将数据从角度材质对话框传递到父组件? [英] how to pass data from angular material dialog to parent component?
本文介绍了如何将数据从角度材质对话框传递到父组件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用的是角度6,我有一个打开对话框的按钮.在对话框中,我有一个获取用户数据的表单,然后有两个按钮可以提交和取消.我试图在控制台中显示表单的数据,但它返回未定义的信息!有什么问题?这是代码的一部分:
I'm using angular 6 and I have a button which opens a dialog. in my dialog, I have a form that gets user's data and then I have two buttons to submit and cancel. I tried to show my form's data in the console but it returns undefined! whats the problem? here is part of codes:
main.component.ts:
import { Work } from '../../../../classes/work_shift';
import { DialogContentComponent} from './dialog-content/dialog-content.component';
export class WorkShiftsComponent implements OnInit {
shifts: Work[];
name: string;
start: string;
end: string;
constructor(public dialog: MatDialog, private shiftService: WorkShiftsService) { }
ngOnInit() {
}
openDialog() {
const dialogRef = this.dialog.open(DialogContentComponent, {
width: '640px',
disableClose: true,
data: {name: this.name, start: this.start, end: this.end}
});
dialogRef.afterClosed().subscribe(result => {
console.log('The dialog was closed');
console.log(result);//returns undefined
});
}
}
dialogContent.component.html:
<mat-dialog-content>
<form class="example-form">
<div fxLayout="column" fxLayoutAlign="space-around" class="form">
<div class="input">
<mat-form-field class="input4">
<input matInput placeholder="Shift name">
</mat-form-field>
</div>
<div>
<mat-form-field class="input input2">
<input matInput placeholder="Start" atp-time-picker>
</mat-form-field>
<mat-form-field class="input input2">
<input matInput placeholder="End" atp-time-picker >
</mat-form-field>
</div>
<br/>
</div>
</form>
</mat-dialog-content>
<mat-dialog-actions>
<button class="mat-button" mat-button (click)="onClose()">Cancel</button>
<button class="mat-button" mat-button [mat-dialog-close]="data" cdkFocusInitial color="primary">Create</button>
</mat-dialog-actions>
推荐答案
common-pop-service:
common-pop-service:
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material';
import { PupupFormComponent } from './pupup-form/pupup-form.component'
@Injectable()
export class CommonModelService {
animal: string;
name: string;
date1: any;
date2: any
constructor(public dialog: MatDialog) { }
openDialog(): Observable<any> {
const dialogRef = this.dialog.open(PupupFormComponent, {
width: '250px',
data: { name: this.name, animal: this.animal, date1: this.date1, date2: this.date2 }
});
return dialogRef.afterClosed();
}
}
parent.component.ts:
parent.component.ts:
import { Component, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { CommonModelService } from './common-model.service'
export interface DialogData {
animal: string;
name: string;
}
@Component({
selector: 'dialog-overview-example',
templateUrl: 'dialog-overview-example.html',
styleUrls: ['dialog-overview-example.css'],
})
export class DialogOverviewExample {
animal: string;
name: string;
constructor(private commModel: CommonModelService) { }
openDialog() {
this.commModel.openDialog().subscribe(data => {
console.log(data);
});
}
}
parent.component.html:
parent.component.html:
<button mat-raised-button (click)="openDialog()">Open Form</button>
pup-up-form.html:
pup-up-form.html:
<div mat-dialog-content>
<p>What's your favorite animal?</p>
<mat-form-field>
<input matInput [(ngModel)]="data.animal">
</mat-form-field>
<mat-form-field>
<input matInput type="time" atp-time-picker [(ngModel)]="data.date1">
</mat-form-field>
<mat-form-field>
<input matInput type="time" atp-time-picker [(ngModel)]="data.date2">
</mat-form-field>
</div>
<div mat-dialog-actions>
<button mat-button (click)="onNoClick()">No Thanks</button>
<button mat-button [mat-dialog-close]="data" cdkFocusInitial>Ok</button>
</div>
这篇关于如何将数据从角度材质对话框传递到父组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文