5
votes

capture d'événement de rejet ngx-bootstrap modal

J'utilise angular 6 et ngx-bootstrap 3.0.1

J'affiche un modal et je souhaite pouvoir afficher une confirmation de suppression / annulation lorsque l'utilisateur tente de fermer le modal après la mise à jour du formulaire.

Je n'ai aucun problème lorsque l'utilisateur utilise mon bouton de fermeture personnalisé, mais je ne sais pas comment appeler ma fonction de fermeture lorsqu'il utilise le backdrop-click en dehors du modal.

Comment puis-je gérer proprement le clic sur Backdrop pour pouvoir afficher mon message de confirmation?

angular twitter-bootstrap bootstrap-modal ngx-bootstrap

4 commentaires

pourriez-vous ajouter votre code plz?

Les exemples sont vraiment clairs valor-software.com/ngx-bootstrap/# / modals # service-events

qu'avez-vous essayé jusqu'à présent?

Désactivez le clic en arrière-plan, forcez votre utilisateur à cliquer sur le bouton pour fermer le modal ... Masquer le modal après avoir cliqué, puis faites ce que vous voulez ...

3 Réponses :

0
votes

Dans la page de documentation ngx-bootstrap, vous pouvez facilement trouver votre solution: https://valor-software.com/ngx-bootstrap/#/modals#directive-events

Pour voir quels événements se déclenchent,

Du côté des composants, p>

if($event.dismissReason == 'backdrop-click')
this.myFunc();

Du côté de votre modèle,

<button type="button" class="btn btn-primary" (click)="showModal()">Open a modal</button>
<br><br>
<pre class="card card-block card-header" *ngFor="let message of messages">{{message}}</pre>

<div class="modal fade" bsModal #modal="bs-modal"
     tabindex="-1" role="dialog" aria-labelledby="dialog-events-name"
     (onShow)="handler('onShow', $event)"
     (onShown)="handler('onShown', $event)"
     (onHide)="handler('onHide', $event)"
     (onHidden)="handler('onHidden', $event)">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h4 id="dialog-events-name" class="modal-title pull-left">Modal</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="modal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Just another modal <br>
        Click <b>&times;</b>, press <code>Esc</code> or click on backdrop to close modal.
      </div>
    </div>
  </div>
</div>

MISE À JOUR:

Comme Je comprends, vous pouvez vérifier $ event comme ceci:

import { Component, ViewChild } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap/modal';

@Component({
  selector: 'demo-modal-events',
  templateUrl: './events.html',
  styles: [`
    .card {
      margin-bottom: 0.75rem;
      padding: 8px;
    }
  `]
})
export class DemoModalEventsComponent {
  @ViewChild(ModalDirective) modal: ModalDirective;
  messages: string[];

  showModal() {
    this.messages = [];
    this.modal.show();
  }
  handler(type: string, $event: ModalDirective) {
    this.messages.push(
      `event ${type} is fired${$event.dismissReason
        ? ', dismissed by ' + $event.dismissReason
        : ''}`
    );
  }
}

4 commentaires

L'événement onHide est déclenché lorsque l'action de masquage commence, ce que je veux est d'exécuter mon propre code de fermeture lorsque l'utilisateur clique en dehors de la fenêtre car je veux pouvoir annuler le masquage.

@ ArthurSaint-Genis J'ai mis à jour ma réponse, veuillez la vérifier.

Vous pouvez le faire après avoir désactivé Backdrop-click pour ne pas fermer la fenêtre, voir ici (Options Backdrop): valor-software.com/ngx-bootstrap / # /…

que diriez-vous d'appeler le modal du composant?

0
votes

Vous pouvez utiliser le hook ngOnDestroy () pour détecter quand l'utilisateur ferme le modal

0 commentaires

1
votes

Ouvrez votre modal avec les options

ngOnInit(): void {
     document.documentElement.addEventListener('click',  this.hideIfIsBackdropClick.bind(this)); 
}

hideIfIsBackdropClick(event: any): void {
     if (event.target.classList.contains('modal')) {
        this.hide();
     }
}

hide(): void {
   if (anyBooleanHere) {
      this.bsModalRef.hide();
   }
}

Dans ExampleModal placez ce code

this.bsModalRef = this.modalService.show(ExampleModal, {
  ignoreBackdropClick: true,
  keyboard: false
});

0 commentaires