ng2 + webpack外部ライブラリのhtml dom要素を参照してください。

Question

こんにちは角2とWebpackの開発者 私はかなり長い間、Webpackの新しい（苦闘のビットでそれを愛し始めて）以来、角度2とsystemjsで作業してきました。

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

その基本的にスライダー：

は、私は次のようにHTMLを持つコンポーネントを持っています。 私はアニメーションやもののために、私が多くのプロジェクトで使っているライブラリを持っています。

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では、HTML、常に私の理解あたりとして0

であることは、スライダを開始し、次のように

機能をTheresの要素はwebpack（prod）によって縮小されたファイルの内部に配置されます

main.bundle.js

私は、スクリプトタグとしてindex.htmlを内部私の外部のJavaScriptファイルを参照しています。要素がmain.bundle.js？の内側にあるので、id="properties-slider"でdom要素を認識していないようです。ライブラリコードでデバッグして見ることができます。

誰も以前に行ったことはありますか？ 助けてくれてありがとう！

Answer 1

この問題の可能性のある解決策は、メソッドを呼び出す前にsettimeoutが発生していることです。より良い解決策がある場合は投稿してください。

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

非常に説得力がありますが、私のために働いています。