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

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

- 甚至更好 -

将服务注入对话框

 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-

如何将JSON响应从服务传递到MatDialog Window'？

1 个答案: