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

此问题的可能解决方案是在调用方法之前设置超时。如果有更好的解决方案请post.

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

不太有说服力，但对我有用。

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

ng2 + webpack refer html dom element in external library

javascript

webpack

html-webpack-plugin

webpack-2

angular