如何将JSON响应从服务传递到MatDialog窗口？

Question

我有一项服务，我在其中执行Http请求以获取每个ID的用户数据...工作正常。

另一方面，我确实有一个MatDialoge ，需要在其中显示来自该服务的JSON响应数据。 该过程的背景是在MatDialoge提供一种可能性，以编辑用户数据，进行更改，更新，最后执行另一个Http请求以更新用户并关闭对话框。 这意味着我将在MatDialog使用提交按钮来发送已编辑的用户/员工数据。

我现在面临的第一个问题是如何将来自Response的数据传递给MatDialog ？

login.service.ts ：

getSingleUser(id) {
   let obsSingleUsersRequest = this.http.get(environment.urlSingleUsers + '/' + id, this.options)
   .map(res => {
       return res.json();
   }).catch( ( error: any) => Observable.throw(error.json().error || 'Server error') );
   return obsSingleUsersRequest;
}

用于执行和绑定MatDilog edit-dialog.component.ts按钮edit-dialog.component.ts ：

import { Component, OnInit, Inject } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from "@angular/forms";
import { MatDialog, MatDialogRef } from '@angular/material';
import { EditUserComponent } from './edit-user/edit-user.component';
import { LoginService } from '../../_service/index';

@Component({
    selector: 'app-edit-dialog',
    templateUrl: './edit-dialog.component.html',
    styleUrls: ['./edit-dialog.component.css']
})
export class EditDialogComponent implements OnInit {
    dialogResult:string = '';

    constructor(public dialog:MatDialog, public loginService:LoginService) {}
    ngOnInit() {}
    openDialog() {
        let dialogRef = this.dialog.open(EditUserComponent, {
            width: '600px'
        });
        this.loginService.getSingleUser('59dc921ffedff606449abef5')
        .subscribe((res) => {
              console.log('User Data EDIT DIALOG: ' + JSON.stringify(res) );
          },
          (err) => {
              err;
              console.log('IN COMPONENT: ' + err);
          });
        dialogRef.afterClosed().subscribe(result => {
            console.log(`Dialog closed: ${result}`);
            this.dialogResult = result;
        })
    }
}

我想在其中显示JSON数据响应并对其进行编辑的Dialog Window组件。 edit-user.component.ts ：

import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { LoginService } from '../../../_service/index';


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


export class EditUserComponent implements OnInit {

      constructor(
          public thisDialogRef: MatDialogRef<EditUserComponent>,
          @Inject(MAT_DIALOG_DATA) public data: string) { }

          ngOnInit() {}

      onCloseConfirm() {
          this.thisDialogRef.close('Confirm');
      }

      onCloseCancel() {
          this.thisDialogRef.close('Cancel');
      }

}

edit-dilog.component.html ：

<mat-card-content>
   <mat-button-group>
       <i class="material-icons" (click)="openDialog()">create</i>
   </mat-button-group>
</mat-card-content>

Answer 1

1. 提取JSON然后打开对话框

    openDialog() { this.loginService.getSingleUser('59dc921ffedff606449abef5') .map(data => { return this.dialog.open(EditUserComponent, { data: data }).afterClosed(); }).subscribe(result => this.dialogResult = result); } 

- 要么 -

2. 立即打开对话框

     openDialog() { let request = this.loginService.getSingleUser('59dc921ffedff606449abef5'); this.dialog.open(EditUserComponent, { data: request }) .afterClosed() .subscribe(result => this.dialogResult = result); } 

   然后在对话框组件中：

    constructor( public thisDialogRef: MatDialogRef<EditUserComponent>, @Inject(MAT_DIALOG_DATA) public data: Observable<any>) { } ngOninit() { this.data.subscribe(data => /* do stuff */); } 

-甚至更好-

3. 将服务注入对话框

     openDialog() { this.dialog.open(EditUserComponent, { data: '59dc921ffedff606449abef5' }) .afterClosed() .subscribe(result => this.dialogResult = result); } 

   然后在对话框组件中：

    constructor( public thisDialogRef: MatDialogRef<EditUserComponent>, @Inject(MAT_DIALOG_DATA) public data: string, public loginService: LoginService) { } ngOninit() { this.loginService.getSingleUser(data) .subscribe(data => /* do stuff */); } 

https://material.angular.io/components/dialog/overview#sharing-data-with-the-dialog-component-