Angular Material : How to close all mat-dialogs and sweet-alerts on logout

Question

我想在 Angular 中注销时关闭所有对话框(mat-dialog、bootstrap modals & sweet alerts)。这是在 AngularJS(1.5 版)中的做法:

function logout() {
  //hide $mdDialog modal
  angular.element('.md-dialog-container').hide();

  //hide any open $mdDialog modals & backdrop
  angular.element('.modal-dialog').hide();
  angular.element('md-backdrop').remove();

  //hide any open bootstrap modals & backdrop
  angular.element('.inmodal').hide();
  angular.element('.fade').remove();

  //hide any sweet alert modals & backdrop
  angular.element('.sweet-alert').hide();
  angular.element('.sweet-overlay').remove();
}

我如何在 Angular 中执行此操作？使用 $('.mat-dialog-container') 或 $('.inmodal') 没有让我选择执行 hide() 或 close()

我尝试这样做，但我无法获取元素引用:

import { ElementRef, Injectable, ViewChild } from '@angular/core';
import { MatDialog, MatDialogContainer, MatDialogRef } from '@angular/material';

export class MyClass
{
  @ViewChild('.mat-dialog-container') _matDialog: ElementRef;
  @ViewChild('.mat-dialog-container') _matDialogRef:MatDialogRef<MatDialog>;

  constructor() { }

  function logout()
  {
    //access the dialogs here
  }
}

Answer 1

这是我在整个应用程序中关闭所有打开的 mat-dialog 所做的:

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

export class myClass {

constructor(private dialogRef: MatDialog) {
}

logOut()
{
  this.dialogRef.closeAll();
}

}

如果您只想关闭一个特定的对话框，您可以遍历 dialogRef.openDialogs 并使用 close()

关闭相应的对话框

这是关闭任何打开/事件的甜蜜警报对话框的方法:

const sweetAlertCancel = document.querySelector('.swal2-cancel') as HTMLElement;

if (sweetAlertCancel) {
    sweetAlertCancel.click(); //only if cancel button exists
}

const sweetAlertConfirm = document.querySelector('.swal2-confirm') as HTMLElement;

if (sweetAlertConfirm) {
   sweetAlertConfirm.click(); //if cancel doesn't exist , confirm is the equivalent for Ok button
}

与 material-dialog 不同，没有方法可以关闭或隐藏所有打开的甜蜜警报对话框。这是我目前能做的。