ngx-smart-modal 中的 Select2 插件不起作用

Question

我在 angular 项目中使用 select2 插件进行选择。当我在表单或 bootstrap 模态中添加我的下拉组件时，一切都按预期工作。但是我决定使用 ngx-smart-modal 并且当我在此模式中添加相同的组件时，它不起作用。实际上看起来它删除了 select2.

的 span 标签

这里是linkstackblitz

Answer 1

问题不是来自库，而是来自组件代码本身：

onModalOpen() {
    setTimeout(() => {
      $('.js-example-inside').select2({
        placeholder: "inside modal"
      });
    });
  }

您需要触发（在我的示例中使用 setTimeout）一个新的 Angular check cycle (lifecycle hooks) 以等待模态内容显示并在 DOM 中可用。您尝试使用 select2(...) 定位的元素尚不可用，这就是它不起作用的原因。

因此固定代码如下所示：

  onModalOpen() {
    setTimeout(() => {
      $('.js-example-inside').select2({
        placeholder: "inside modal"
      });
    });
  }

Select2 plugin in ngx-smart-modal doesn't work