在 Angular 4 组件中监听 UIkit 模态事件答案

【问题标题】：Listen to UIkit modal events in Angular 4 components在 Angular 4 组件中监听 UIkit 模态事件
【发布时间】：2018-04-29 06:07:54
【问题描述】：

如何在我的 Angular 组件中监听 UIkit 的 Modal 对话框发出的事件？

我想在模态关闭时运行一些代码，并在模态 div 上添加了(hidden)="onModalHidden()"，但该方法从未被调用。

HTML 模板

<div id="modal-user-data" uk-modal (hidden)="onModalHidden()">
  <div class="uk-modal-dialog uk-modal-body uk-overflow-auto">
    <h4 class="uk-modal-title uk-heading-divider">Header</h4>
    <p>Some Content</p>
    <p class="uk-text-right">
      <button class="uk-button uk-button-default uk-modal-close" type="button">close</button>
    </p>
  </div>
</div>

Component.ts

onModalHidden() {
  console.log('Never called...');
}

我正在使用 Angular 4.4.5 和 UIkit 3。

任何帮助/指针将不胜感激。

【问题讨论】：

标签： angular modal-dialog getuikit

【解决方案1】：

是的，你可以：

import * as uikit from 'uikit';

然后：

deleteUser(): void {
    uikit.modal.alert('Deleting user');
}

感谢丹卡

【讨论】：

【解决方案2】：

我从未将它们一起使用，但根据文档，您可以将 UIkit 与 React 一起使用。只记得使用 data-uk 属性而不是 uk-only 属性。

UIkit 的编写方式也与如今的 js 组件一样。您可以尝试使用import * from 'uikit' 导入它们，看看会发生什么。我会走这条路，如果这还不够的话 - 专注于使用 javascript 设置组件，而不是通过标签属性。

【讨论】：