模态关闭后点击事件?

时间:2017-10-21 07:32:13

标签: angular vmware-clarity

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

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

感谢。

1 个答案:

答案 0 :(得分:8)

[(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
  3. 我确实偏爱第一个,因为在这样简单的getter和setter上,没有性能风险。但我想,因为我提到了去糖的语法,我不妨展示一个例子。