模态关闭后点击事件？

Question

当我关闭一个模态时,我需要调用一个函数(假或使用表单控件重置模态中的内容)但是我没有在点击后找到任何事件的处理程序,我怎么能这样做？

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

谢谢.

Answer 1

[(clrModalOpen)]="opened"只是语法糖 [clrModalOpen]="opened" (clrModalOpenChange)="opened = $event" (参见https://angular.io/guide/template-syntax#two-way-binding---了解更多信息).

所以在你的情况下,事件处理程序是(clrModalOpenChange).另请注意,在Angular中,当更改来自双向绑定中的相应输入时,不会触发输出,因为它会导致循环.这意味着如果您自己的"关闭"按钮通过输入更新模态,则不会触发输出.解决方案只是确保从我们的输出和您自己的方法调用您的处理程序以关闭模式(如果有的话).

因为我被要求提供一个实例,这里有两个:

1. 带有getter和setter的优雅解决方案,保持双向绑定语法:https://plnkr.co/edit/7J8MfH？p = preview
2. 具有去糖化版本的显式监听器:https://plnkr.co/edit/6cWHwu ？ p = preview

我确实偏爱第一个,因为在这样简单的getter和setter上,没有性能风险.但我想,因为我提到了去糖的语法,我不妨展示一个例子.