[(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:
- solution élégante avec getter et setter, conserve la syntaxe de liaison dans les deux sens: https://plnkr.co/edit/7J8MfH?p=preview
- 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.
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? –
Merci Eudes de bien fonctionner ... –
@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