如何將JSON響應從服務傳遞給MatDialog窗口？

Question

我有一個服務，我執行Http請求來獲取每個ID的用戶數據...工作正常。

另一方面，我確實有一個MatDialoge，我需要顯示來自該服務的JSON響應數據。該過程的背景是在MatDialoge中提供編輯用戶數據，更改和更新以及在最後執行另一個Http請求來更新用戶並關閉對話的可能性。這意味着我將使用MatDialog內的提交按鈕發送編輯的用戶/員工數據。

我現在面臨的第一個問題是如何將響應中的數據傳遞給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按鈕組件：

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數據響應並編輯它們。 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); 
   } 
   

- 或 -

打開對話框立即

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 */); 
} 

- 甚至更好 -

1. 注射服務爲對話框

   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-