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