如何在Angular中通过模态包装服务公开afterClosed()方法/ observable

import { Injectable } from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ModalWrapperService {
  constructor(private dialog: MatDialog) {}

  openModal(component: any, config: any): MatDialogRef<any> {
    return this.dialog.open(component, config);
  }

  afterClosed(dialogRef: MatDialogRef<any>): Observable<any> {
    return dialogRef.afterClosed();
  }
}

import { Component } from '@angular/core';
import { ModalWrapperService } from 'path/to/modal-wrapper.service';
import { MyModalComponent } from 'path/to/my-modal.component';

@Component({
  selector: 'app-my-component',
  template: `
    <button (click)="openModal()">Open Modal</button>
  `
})
export class MyComponent {
  constructor(private modalWrapperService: ModalWrapperService) {}

  openModal(): void {
    const dialogRef = this.modalWrapperService.openModal(MyModalComponent, {
      width: '400px',
      data: { /* 可选的传递给模态框的数据 */ }
    });

    this.modalWrapperService.afterClosed(dialogRef).subscribe(result => {
      // 在模态框关闭后执行的操作，可以获取返回的数据
      console.log(result);
    });
  }
}

import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-my-modal',
  template: `
    <h1>Modal Content</h1>
    <!-- 模态框的内容 -->
    <button (click)="closeModal()">Close</button>
  `
})
export class MyModalComponent {
  constructor(
    private dialogRef: MatDialogRef<MyModalComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {}

  closeModal(): void {
    // 关闭模态框并返回数据
    this.dialogRef.close(/* 返回的数据 */);
  }
}