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

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