ng2 + webpack引用外部库中的html dom元素

Question

您好Angular 2和Webpack开发人员，我已经使用了很长时间，开始使用angular 2和systemjs，这是webpack的新功能（开始有点费力地喜欢它）。

我有一个具有html的组件，如下所示：

  <div id="partners-slider" class="partners">
        <div class="partners__slider js-slick-slider">
          <a class="partners__item"><img src="assets/logo-company-1.png" alt="">Elite Construction Group, LLC</a>
          <a class="partners__item"><img src="assets/logo-company-2.png" alt="">Pro Era Limited</a>
         </div></div>

它基本上是一个滑块。 我有一个用于许多项目的库，用于动画和其他东西。

有如下功能可启动滑块：

function initPartnersSlider(container) {
var $partnersSlider = $(container) ;
if (!$partnersSlider.length) return;

$partnersSlider
  .find('.js-slick-slider')
  .slick({
    dots: false,
    infinite: true,
    speed: 300,
    slidesToShow: 5,
    autoplay: true,
    accessibility: false,
    prevArrow: $partnersSlider.find('.js-partners-prev'),
    nextArrow: $partnersSlider.find('.js-partners-next'),
    responsive: [
      {
        breakpoint: 1100,
        settings: {
          slidesToShow: 4
        }
      },
      {
        breakpoint: 1000,
        settings: {
          slidesToShow: 3
        }
      },
      {
        breakpoint: 768,
        settings: {
          slidesToShow: 1
        }
      }
    ]
  });}

函数调用：

initPartnersSlider('#partners-slider');

这里的问题是$partnersSlider.length始终为0。

根据我的理解，html元素由webpack（prod）放在一个缩小的文件中

main.bundle.js

我将index.html中的外部javascript文件称为脚本标签。 它似乎无法识别id="properties-slider"的dom元素，因为该元素位于main.bundle.js？中。 我可以调试并在我的库代码中看到它。

有人做过吗？ 谢谢你的帮助！

Answer 1

这个问题的可能解决方案是在调用方法之前设置settimeout。 如果有更好的解决方案，请发布。

setTimeout(() => {
     initPartnersSlider('#partners-slider');
    }, 0);

不是很令人信服，但为我工作。