Angular登出时如何关闭所有mat-dialog、Bootstrap模态框及Sweet-Alert？

嘿，我来给你捋捋在Angular（2+版本）里怎么实现登出时关闭所有弹窗——和AngularJS直接操作DOM的思路不一样，Angular更推荐用官方提供的服务来管理，这样更符合组件化的设计，也不容易出奇怪的bug：

1. 关闭所有Mat Dialog（Angular Material） #

Angular Material的MatDialog服务本身就提供了现成的closeAll()方法，直接调用就能一键关闭所有打开的对话框，完全不用手动操作DOM：

import { MatDialog } from '@angular/material/dialog';

constructor(private matDialog: MatDialog) {}

logout() {
  // 关闭所有Mat Dialog
  this.matDialog.closeAll();
  // 后续的登出逻辑（比如清token、跳转登录页）...
}

2. 关闭所有Bootstrap模态框 #

如果你用的是ng-bootstrap（官方适配Angular的Bootstrap组件库），直接用NgbModal的dismissAll()方法就搞定了：

import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

constructor(private ngbModal: NgbModal) {}

logout() {
  // 关闭所有Bootstrap模态框，还能传个标识说明是登出触发的
  this.ngbModal.dismissAll('user-logout');
  // 后续的登出逻辑...
}

要是你实在是用的原生Bootstrap JS（不太推荐，容易和Angular的变更检测冲突），也可以这样操作DOM，但尽量少用：

logout() {
  // 遍历所有打开的Bootstrap模态框并关闭
  document.querySelectorAll('.modal.show').forEach(modal => {
    (window as any).$(modal).modal('hide');
  });
  // 后续的登出逻辑...
}

3. 关闭所有Sweet-Alert弹窗 #

如果用的是SweetAlert2（现在主流的Sweet-Alert库），它有个静态方法Swal.closeAll()可以直接关闭所有弹窗：

import Swal from 'sweetalert2';

logout() {
  // 关闭所有Sweet-Alert弹窗
  Swal.closeAll();
  // 后续的登出逻辑...
}

整合完整的登出函数 #

把上面的逻辑整合到一起，就是完整的登出处理代码了：

import { MatDialog } from '@angular/material/dialog';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import Swal from 'sweetalert2';

// ...

constructor(
  private matDialog: MatDialog,
  private ngbModal: NgbModal
) {}

logout() {
  // 关闭Mat Dialog
  this.matDialog.closeAll();
  // 关闭Bootstrap模态框（ng-bootstrap版本）
  this.ngbModal.dismissAll('user-logout');
  // 关闭Sweet-Alert弹窗
  Swal.closeAll();

  // 执行核心登出逻辑
  localStorage.removeItem('auth-token');
  window.location.href = '/login';
}

这种方式比直接操作DOM更安全，也更符合Angular的设计理念，不会因为框架更新或者DOM结构变化导致代码失效~

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