从 Angular Material Dialog 返回 Promise/Observable 的正确方法答案

【问题标题】：Correct way of returning Promise/Observable from Angular Material Dialog从 Angular Material Dialog 返回 Promise/Observable 的正确方法
【发布时间】：2023-01-28 17:30:32
【问题描述】：

我有一个项目应该从旧的 angularJS 重写为新的角度。以前它使用 angular-bootstrap 库来渲染模态。结果它在模式关闭事件后返回了 Promise。在有角材料中复制类似行为的正确方法是什么？不是 Promise，而是 Observable。

我试过这个

confirmation(title: string, content: string, okCallback: () => void, cancelCallback: () => void): Observable<any> {
  const dialogRef = this.dialog.open(MxConfirmationDialog, {
    data: {title, content}
  });

  const closeResult = dialogRef.afterClosed();

  closeResult.subscribe(result => {
    if (result && okCallback) {
      okCallback();
    }
    if (!result && cancelCallback) {
      cancelCallback();
    }
  });

  return closeResult;
}

调用确认对话框：

dialogService.confirmation(
      'Title',
      'Message',
      () => true, 
      () => false
    )

在我的例子中closeResult 的值是模态关闭的还是不是...但不是回调的结果...

【问题讨论】：

标签： javascript angular angular-material observable

【解决方案1】：

问题是你实际上是在返回closeResult 您需要使用 of 运算符将回调的值作为可观察值返回。

  confirmation(
    title: string,
    content: string,
    okCallback: () => void,
    cancelCallback: () => void,
  ): Observable<any> {

     const dialogRef = this.dialog.open(MxConfirmationDialog, {
       data: {title, content}
    });

    const closeResult = dialogRef.afterClosed();

    closeResult.subscribe((result) => {
      if (result && okCallback) {
        // return the results of callback as observables
        return of(okCallback());
      }

      if (!result && cancelCallback) {
        return of(cancelCallback());
      }
    });

    // base case
    return EMPTY;
  }

【讨论】：