从 HttpInterceptor 显示模式对话框答案

【问题标题】：Show modal dialog from HttpInterceptor从 HttpInterceptor 显示模式对话框
【发布时间】：2020-10-28 03:34:15
【问题描述】：

@Injectable()
export class MyInterceptor implements HttpInterceptor {
  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {

    //show a modal dialog to hold the request until user respond/close the dialog
    if(ShowModalDialog()) 
       return next.handle(req);
     else
       route to login
  }
}

我试图显示一个角度材质对话框，但它不会阻止请求并继续执行到下一行。

如何在发现请求出错时从拦截器显示模式对话框，向用户显示一些选项并在对话框关闭后恢复执行。

是否可以通过此类对话框停止/保留请求？

【问题讨论】：

您使用的是哪种模式对话框？你用的是棱角材料吗？
@PoulKruijt，是的。我已经更新了问题

标签： javascript angular typescript angular-material httpinterceptor

【解决方案1】：

您可以使用角度材质对话框来做到这一点：

@Injectable()
export class MyInterceptor implements HttpInterceptor {
  constructor(private dialog: MatDialog, private router: Router) {}
  
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if(ShowModalDialog()) {
      return this.dialog.open(DialogModalComponent).afterClosed().pipe(
        concatMap(() => next.handle(req))
      );
    } else {
      return next.handle(req);
    }
  }
}

【讨论】：