Question

Hello 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);

不是很有说服力，但为我工作。

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

1 个答案: