Angular Material:如何在注销时关闭所有mat-dialogs和sweet-alert

Question

我想在Angular中注销时关闭所有对话框(mat-dialog,bootstrap modals和sweet alert).这是在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没有可用于关闭或隐藏所有打开甜蜜警报对话框的方法不同.这是我到目前为止所能做到的.

Answer 2

对于任何寻找答案的人，如果方法.closeAll()不可用DialogRef（例如，如果使用较新的@angular/material组件）：

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

constructor(matDialog: MatDialog) {…}

logout() {
    this.matDialog.closeAll();
}