web-dev-qa-db-ja.com

Angular素材:ログアウト時にすべてのマットダイアログとスイートアラートを閉じる方法

私は、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
  }
}
_
14
Sri7

これは、アプリケーション全体で開いているすべての_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_とは異なり、開いているすべての甘いアラートダイアログを閉じたり非表示にしたりする方法はありません。これは私がこれまでにできることです。

23
Sri7