[英]ng2 + webpack refer html dom element in external library
Hello Angular 2 and Webpack developers, I have been working with angular 2 and systemjs since quite a while, new to webpack (starting to love it with a bit of struggle). 您好Angular 2和Webpack开发人员,我已经使用了很长时间,开始使用angular 2和systemjs,这是webpack的新功能(开始有点费力地喜欢它)。
I have a component that has html as follows: 我有一个具有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>
Its basically a slider. 它基本上是一个滑块。 I have a library that I use in a lot of projects, for animations and stuffs.
我有一个用于许多项目的库,用于动画和其他东西。
Theres a function as follows that initiates a slider: 有如下功能可启动滑块:
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
}
}
]
});}
function call: 函数调用:
initPartnersSlider('#partners-slider');
Problem here is $partnersSlider.length
is always 0. 这里的问题是
$partnersSlider.length
始终为0。
As per my understanding, the html element is placed inside a minified file by webpack (prod) 根据我的理解,html元素由webpack(prod)放在一个缩小的文件中
main.bundle.js
main.bundle.js
I am referring my external javascript file inside index.html as a script tag. 我将index.html中的外部javascript文件称为脚本标签。 It doesnt seem to recognise the dom element with
id="properties-slider"
as the element is inside main.bundle.js?. 它似乎无法识别
id="properties-slider"
的dom元素,因为该元素位于main.bundle.js?中。 I am able to debug and see it in my library code. 我可以调试并在我的库代码中看到它。
Has anyone done that before? 有人做过吗? Thanks for any help!
谢谢你的帮助!
A probable solution to this problem is having a settimeout before calling methods. 这个问题的可能解决方案是在调用方法之前设置settimeout。 If there are better solutions please post.
如果有更好的解决方案,请发布。
setTimeout(() => {
initPartnersSlider('#partners-slider');
}, 0);
Not very convincing, but worked for me. 不是很令人信服,但为我工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.