3

当我关闭模式时，我需要调用一个函数（使用表单控件设置错误或重置模式中的内容）但单击后我没有找到任何事件处理程序，我该怎么做？

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

谢谢。

4

1 回答 1

12

[(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 上，没有性能风险。但我想，既然我提到了去糖语法，我不妨举个例子。

于 2017-10-24T21:26:48.570 回答