Angular12如何从Angular Material Dialog获取返回值到外部服务

dialogRef.afterClosed() 是异步可观察对象，你原有的 dialogResult() 方法没有返回任何值，同时你在 update 方法中用同步逻辑判断异步方法的返回值，此时弹窗还没关闭、订阅逻辑还没触发，自然拿不到返回的result值。

1. 调整ModalResultService代码 #

不要在服务内部直接订阅afterClosed，直接将该可观察对象返回，交给调用方处理：

import { Injectable } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { ModalComponent } from '../modal/modal.component';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ModalResultService {
  param!:string 

  constructor(public dialog: MatDialog) { }

  // 直接返回弹窗关闭的可观察对象，泛型可根据你弹窗返回的result实际类型调整
  dialogResult(): Observable<string | undefined> {
    const dialogRef = this.dialog.open(ModalComponent);
    return dialogRef.afterClosed();
  }
}

2. 调整update方法的异步逻辑 #

使用RxJS的switchMap操作符串联弹窗结果判断和后续请求逻辑，保证异步流程按顺序执行：

import { of } from 'rxjs';
import { switchMap } from 'rxjs/operators';

// ...其余原有代码不变
update(note: Notation): Observable<Notation> {
  return this.res.dialogResult().pipe(
    switchMap(result => {
      // 此处根据你的业务需求调整result的判断条件，比如判断是否为true、是否非空等
      if (result) {
        return this.http.patch<Notation>(`${environment.fbDbUrl}/posts/${note.id}.json`, note);
      }
      return of(this.dNotation);
    })
  )
}

修改后的update方法依然返回Observable<Notation>，你在组件中调用该方法时，正常订阅即可拿到最终结果，和原有调用逻辑保持一致。

内容的提问来源于stack exchange，提问作者Vladimir