如何将数据从角度材质对话框传递给父组件? [英] how to pass data from angular material dialog to parent component?

问题描述

我使用的是 angular 6，我有一个按钮可以打开一个对话框.在我的对话框中，我有一个获取用户数据的表单，然后我有两个按钮可以提交和取消.我试图在控制台中显示我的表单数据，但它返回未定义！有什么问题?这是代码的一部分:

ma​​in.component.ts:

import { Work } from '../../../../classes/work_shift';从 './dialog-content/dialog-content.component' 导入 { DialogContentComponent};导出类 WorkShiftsComponent 实现 OnInit {班次:工作[];名称:字符串；开始:字符串；结束:字符串；构造函数(公共对话框:MatDialog，私有 shiftService:WorkShiftsService){}ngOnInit() {}打开对话框(){const dialogRef = this.dialog.open(DialogContentComponent, {宽度:'640px'，禁用关闭:真，数据:{名称:this.name，开始:this.start，结束:this.end}});dialogRef.afterClosed().subscribe(result => {console.log('对话框已关闭');console.log(result);//返回未定义});}}

dialogContent.component.html:

 <form class="example-form"><div fxLayout="column" fxLayoutAlign="space-around" class="form"><div class="输入"><mat-form-field class="input4"><input matInput placeholder="班次名称"></mat-form-field>

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

<br/>

</表单></mat-dialog-content><mat-dialog-actions><button class="mat-button" mat-button (click)="onClose()">取消</button><button class="mat-button" mat-button [mat-dialog-close]="data" cdkFocusInitial color="primary">创建</button></mat-dialog-actions>

解决方案

DEMO COMMON POP-FORM

common-pop-service:

import { Injectable } from '@angular/core';从 'rxjs' 导入 { Observable };导入 { MatDialogRef, MatDialog, MatDialogConfig } from '@angular/material';从'./pupup-form/pupup-form.component'导入{PupupFormComponent}@Injectable()导出类 CommonModelService {动物:绳子；名称:字符串；日期1:任何；日期2:任何构造函数(公共对话框:MatDialog){}openDialog(): Observable{const dialogRef = this.dialog.open(PupupFormComponent, {宽度:'250px'，数据:{名称:this.name，动物:this.animal，date1:​​this.date1，date2:this.date2}});返回 dialogRef.afterClosed();}}

parent.component.ts:

import { Component, Inject } from '@angular/core';从@angular/material"导入 { MatDialog, MatDialogRef, MAT_DIALOG_DATA };从 './common-model.service' 导入 { CommonModelService }导出接口 DialogData {动物:绳子；名称:字符串；}@成分({选择器:'对话框概述-示例'，templateUrl: 'dialog-overview-example.html',styleUrls: ['dialog-overview-example.css'],})导出类 DialogOverviewExample {动物:绳子；名称:字符串；构造函数(私有通信模型:CommonModelService){}打开对话框(){this.commModel.openDialog().subscribe(data => {控制台日志(数据)；});}}

parent.component.html:

<button mat-raised-button (click)="openDialog()">打开表单</button>

pup-up-form.html:

<p>你最喜欢的动物是什么?</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 mat-dialog-actions><button mat-button (click)="onNoClick()">不，谢谢</button><button mat-button [mat-dialog-close]="data" cdkFocusInitial>好的</button>

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>

解决方案

DEMO COMMON POP-FORM

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:

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:

<button mat-raised-button (click)="openDialog()">Open Form</button>

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屋！