возвращение объекта вызывающей стороне сервиса - PullRequest
Новая
       10

возвращение объекта вызывающей стороне сервиса

1 голос
/ 03 мая 2019

Я использую Angular 7 и Angular Material для отображения диалогового окна. Я написал сервис (modal.service) для отображения диалогового окна, но я хотел бы передать dialogReference из MatDialog.open обратно вызывающему компоненту, чтобы он мог выполнять любую постобработку после закрытия диалога.

Вот мой модал.сервис: 

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

Спасибо за вашу помощь!

1 Ответ

1 голос
/ 03 мая 2019

Один из вариантов - использовать субъект для общения . В зависимости от ситуации, вы можете просто вернуть 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));
}

Если это решение не подходит для вас в отношении возможности повторного использования, я бы предложил тему, подобную ссылке, которую я предоставил.

ДЕМО вышеуказанного кода

...