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

Question

我在一个角度项目中使用select2插件进行选择。当我以表单形式或以引导模式添加下拉组件时，一切都会按预期进行。但是我决定使用ngx-smart-modal，并且当我在此模式中添加相同的组件时，它不起作用。实际上，它似乎删除了select2的span标签。

这里的链接stackblitz

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"
      });
    });
  }

这里是 the fixed stackblitz 。