Question

我正在使用Angular 7和Angular Material来显示一个对话框。我已经编写了一个服务（modal.service）来显示对话框，但是我想将MatDialog.open的dialogReference传递回调用组件，以便它可以在对话框关闭时进行任何后处理。

这是我的模态服务：

import { ReviewModalComponent } from './../components/review-modal/review-modal.component';
import { Injectable } from '@angular/core';
import { DataService } from 'src/app/services/data.service';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';

@Injectable({
  providedIn: 'root'
})
export class ModalService {

  dialogRef : any;

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

  showReviewModal(id, mode){
    this.dataService.getReview(id).subscribe(
      (review:any) => {
        this._openReviewModal(id, mode, review);
      }
    );
  }

  _openReviewModal(id, mode, review){
    this.dialogRef = this.dialog.open(ReviewModalComponent, {width: '500px', data: { id: id, mode: mode, review: review } })
    .afterClosed().subscribe(result => {alert('closed')});
  }
}

我的问题是，如何将this.dialogRef传递回调用组件，以便可以在那里订阅.afterClosed？

这是我的呼叫组件（或部分呼叫组件）：

openReviewDialog(id): void {
    this.modalService.showReviewModal(id, 'edit');//.subscribe(x=>alert(x));
}

感谢您的帮助！

Answer 1

一种选择是使用 a subject to communicate 。根据具体情况，您可以将dialogRef返回到调用组件并在那里进行订阅。由于您正在服务中调用另一个函数，因此我们使用switchMap来链接请求：

import { tap, switchMap } from 'rxjs/operators';

// ....

showReviewModal(id, mode){
  return this.dataService.getReview(id).pipe(
    switchMap((review:any) => this._openReviewModal(id, mode, review))
  );
}

_openReviewModal(id, mode, review){
  const dialogRef = this.dialog.open(...)

  return dialogRef.afterClosed().pipe(
    tap(() => console.log('maybe service needs to do stuff also?'))
  );
}

，然后调用组件进行订阅：

openReviewDialog(id): void {
   this.modalService.showReviewModal(id, 'edit').subscribe(x => alert(x));
}

如果该解决方案在可重用性方面不适合您，我建议您提供我提供的链接之类的主题。

DEMO of the above code

将对象返回给服务的调用者

1 个答案: