web-dev-qa-db-fra.com

Angular Material: Comment fermer toutes les boîtes de dialogue mat et les alertes douces à la déconnexion

Je voulais fermer toutes mes boîtes de dialogue (mat-dialog, bootstrap modals & sweet alerts) à la déconnexion dans Angular. Voici comment cela a été fait dans AngularJS (version 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();
}

Comment puis-je faire cela dans Angular? L'utilisation de $('.mat-dialog-container') ou $('.inmodal') ne me donne pas la possibilité de faire hide() ou close()

J'ai essayé de le faire, mais je ne peux pas obtenir la référence de l'élément:

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
  }
}
angularangular-materialng-bootstrapsweetalert2
14
Sri7

Voici ce que j'ai fait pour fermer tout mat-dialog Ouvert tout au long de l'application:

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

export class myClass {

constructor(private dialogRef: MatDialog) {
}

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

}

Si vous souhaitez fermer uniquement une boîte de dialogue spécifique, vous pouvez parcourir dialogRef.openDialogs Et fermer la boîte de dialogue correspondante à l'aide de close()

Voici comment fermer une boîte de dialogue d'alerte douce ouverte/active:

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
}

Contrairement à material-dialog, Aucune méthode n'est disponible pour fermer ou masquer toutes les boîtes de dialogue d'alerte douce ouvertes. C'est ce que je peux faire jusqu'à présent.

23
Sri7