2017-10-21 4 views
1

Lorsque je ferme un modal, je dois appeler une fonction (false ou réinitialiser le contenu dans le modal en utilisant les contrôles de formulaire) mais je n'ai trouvé aucun gestionnaire pour l'événement après clic, comment je pourrais le faire?Non Après un événement de clic sur la fermeture modale?

<clr-modal [(clrModalOpen)]="opened" [clrModalStaticBackdrop]="true"> 
     ... 
</clr-modal> 

Merci.

Répondre

5

[(clrModalOpen)]="opened" est juste du sucre syntaxique pour [clrModalOpen]="opened" (clrModalOpenChange)="opened = $event" (voir https://angular.io/guide/template-syntax#two-way-binding--- pour plus d'informations). Dans votre cas, le gestionnaire d'événements est (clrModalOpenChange). Notez également que dans Angular, les sorties ne sont pas déclenchées lorsque le changement provient de l'entrée correspondante dans une liaison bidirectionnelle, car cela conduirait à une boucle. Ce qui signifie que si votre propre bouton Fermer met à jour le modal via l'entrée, la sortie ne sera pas déclenchée. La solution est simplement de s'assurer que votre gestionnaire est appelé à la fois à partir de notre sortie et de votre propre méthode pour fermer le modal s'il y en a un.

Parce que on m'a demandé un exemple vivant, voici deux d'entre eux:

  1. solution élégante avec getter et setter, conserve la syntaxe de liaison dans les deux sens: https://plnkr.co/edit/7J8MfH?p=preview
  2. auditeur explicite avec désucrage version: https://plnkr.co/edit/6cWHwu?p=preview

J'ai une préférence pour le premier parce que sur de tels getters et setters simples, il n'y a pas de risque de performance. Mais je pensais depuis que j'ai mentionné la syntaxe de-sugared, je pourrais aussi bien montrer un exemple.

+0

Eudes, votre explication est claire. Mais je ne pouvais pas le faire fonctionner. Pouvez-vous donner un exemple vivant? En outre, je suppose que vous faites partie de l'équipe qui développe Clarity. Bien que je l'utilise depuis un certain temps, je n'arrive toujours pas à tout obtenir (par exemple, cette notation Banana-In-a-Box) de la documentation de Clarity. Avez-vous prévu d'élaborer/d'améliorer (faire référence à Angular en tant que de besoin) dans votre documentation? –

+0

Merci Eudes de bien fonctionner ... –

+0

@SoumyaKanti: J'ai ajouté quelques plunkers à la réponse. En ce qui concerne la documentation, je ne pense pas que ce soit notre rôle de re-documenter ce qui est déjà sur le site Web d'Angular. Nous nous attendons à ce que les personnes utilisant Clarity connaissent la syntaxe standard du modèle Angular et d'autres fonctionnalités non-Clarity. – Eudes