Question

如何在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。

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

Answer 1

要注意一些，是的，你可以：

import * as uikit from 'uikit';

然后：

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

感谢danca

Answer 2

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

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

收听Angular 4组件中的UIkit模态事件

2 个答案: