Question

我有一个对话框组件和应用程序组件，其中实现了材质对话框。 以下是应用组件的代码

map

对话框组件是表单的实现位置，我需要获取表单值并在此处接收它。我尝试使用角度输入和输出来实现这一点，但dint工作因为没有孩子和父母的沟通。 以下是对话框组件

import { Component } from '@angular/core';
import {VERSION, MatDialog, MatDialogRef} from '@angular/material';
import { DialogComponent } from '../dialog.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  DialogRef: MatDialogRef<DialogComponent>;
  constructor(private dialog: MatDialog) {}
  ngOnInit() {
  }
  addItem() {
    this.DialogRef = this.dialog.open(DialogComponent);
  }

receiveMessageFromDialogComponent() {
  // how to receive message from dialog component
}
closeDialog(): void {
  this.DialogRef.close();
}
}

Working Example on StackBlitz

Answer 1

实际上，您可以使用 subscription 通过@Output与MatDialogRef<EditDialog>进行通信。在某些情况下，您可能需要在关闭对话框之前从对话框获取数据。因此，我们无法使用this.DialoogRef.afterClosed()函数，因为我们必须先关闭对话框才能获取数据。

在您的 DialogComponent 上：

export class DialogComponent {

  @Output() submitClicked = new EventEmitter<any>();

  constructor(public dialogRef: MatDialogRef<DialogComponent>){}

  saveMessage() {
    const data = 'Your data';
    this.submitClicked.emit(data);
  }

  closeDialog() {
    this.dialogRef.close();
  }
}

在您的 AppComponent 上：

addItem() {
    this.DialogRef = this.dialog.open(DialogComponent);
    this.DialogRef.componentInstance.submitClicked.subscribe(result => {
        console.log('Got the data!', result);

    });
}

最好确保unsubscribe()个Subscription。这样的事情会做：

const dialogSubmitSubscription = this.DialogRef.componentInstance.submitClicked
    .subscribe(result => {
      console.log('Got the data!', result);
      dialogSubmitSubscription.unsubscribe();
    });

此外，如果需要，您始终可以从AppComponent到this.DialogRef.close()关闭对话框。

Answer 2

一个。订阅afterClosed this.DialogRef的{{1}}观察者，您可以在app.component.ts中调用this.DialogRef.open之后添加它。就像这样

  addItem() {
    this.DialogRef = this.dialog.open(DialogComponent);
    this.DialogRef.afterClosed()
    .subscribe(return => console.log(return));
  }

B中。在dialog.component.ts导入MatDialog服务，如下所示：

import { Component, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from'@angular/material';

℃。确保将dialogRef传递给对话框构造函数，如下所示

  constructor(public dialogRef: MatDialogRef<DialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any) {}

℃。在saveMessage()方法中，调用close对话框方法并传递返回app组件所需的值。

  saveMessage() {
    this.dialogRef.close('hello data');
  }

d。应用程序组件将接收该值，因为它订阅了afterClosed对话框observable

另请参阅完整示例表单angular material docs

干杯

Answer 3

用例场景，如果要在对话框中编辑某些数据，则将编辑后的数据从对话框传递回组件。我使用了上面的示例，但我合并了答案，以便更容易理解。假设数据来自服务，此示例将数据从mat-dialog组件共享到同一文件中的app组件。

// app.component.html  

<div *ngFor="let a of appData">
  <p>{{a.name}}</p>
<button> (click)="open(event, a)">edit</button> 
</div>

// app.component.ts    

import { Component, Inject, OnInit } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { DataService } from './data.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
 appData: Array <any>;

 constructor(private dataService: DataService, public dialog: MatDialog) {}

 ngOnInit() {

   this.dataService.getData()
    .subscribe(res => { 
      //console.log(res);
      this.appData = res;
   })
 }

public open(event, data) {
  this.dialog.open(EditDialog, {
    data: data,
}).afterClosed()
  .subscribe(item => {
    // Edited Data sent to App Component from Dialog 
    console.log(item);
  });
 }
}

@Component({
  selector: 'edit-dialog',
  template: `<span>Edit Data</span>
             <mat-dialog-content>
               <input matInput name="title" type="text" class="form-control" placeholder="Edit Name" [(ngModel)]="dataItem.name">
             </mat-dialog-content>
             <div>
               <span><button mat-raised-button (click)="updateData()">Update Recipe</button></span>
             </div>`,
 })

 export class EditDialog implements OnInit {

   dataItem: any;  

   constructor(public dialogRef: MatDialogRef <EditDialog> , @Inject(MAT_DIALOG_DATA) public data: any, private dataService: DataService) {
     this.dataItem = this.data;
   }

   public updateData() {
     this.dialogRef.close(this.dataItem);
   }

   ngOnInit() {
   }
}

如何从mat对话框组件到实现mat对话框的组件进行通信？

3 个答案: