使用带有angular4的光滑块 [英] Using light slider with angular4

问题描述

我在Angular4上使用了 lightslider ，但是我在初始化时遇到了问题 lightslider().当我在index.html中的任何html元素上初始化光滑块时，它可以工作，但是当我导航至应在其中初始化滑块的页面时，它将失败.例如，

Hi I am using lightslider with Angular4 but in that I am facing issue in initialization in lightslider(). When I initialize light slider on any html element in index.html, it works but when I navigate to the page in which slider should be initialize it fails. For Example,

Home.html 模板和 Home.ts 组件是我的应用程序的首页和首页，并且 sliderHome 元素上有一个滑块，另一个页面是 Info.html 模板和 Info.ts 组件，该组件在 inforSlider 元素上具有更小标签.因此，当用户登陆到 Home 页面的第一页时，滑块正在工作，但是当用户从该页面导航到 Info 页面时，滑块却无法正常工作，实际上因为，它没有被初始化.加载特定组件时如何初始化它.

Home.html template and Home.ts component are the main and first page of my application and there is slider on sliderHome element and another page is Info.htmltemplate and Info.ts component, which has slier on inforSlider element. So when user lands on first page that is Home page, slider is working but when user navigate from this page to Info page slider is not working as it should be and it is because, it is not initialized. How can I initialize it when particular component loads.

代码如下所示，并将其放在 index.html 页面(主页)

The code is like below and it is put in index.html page(main page),

$(document).ready(function () {
setTimeout(function () {
  $('#sliderHome').lightSlider({
    adaptiveHeight: true,
    item: 1,
    slideMargin: 0,
    loop: true
  });
  $('#inforSlider').lightSlider({
    adaptiveHeight: true,
    item: 1,
    slideMargin: 0,
    loop: true
  });
}, 500);
});

推荐答案

我已使用以下代码修复了此问题，并将此代码放入了需要初始化滑块的组件中.

I have fixed this using following code, I have put this code in the component where slider needs to be initialized.

import { Component, OnInit, Renderer2, Inject } from "@angular/core";
import { DOCUMENT } from "@angular/platform-browser";

@Component({
selector: 'slider-selector',
templateUrl: './slider.html',
styleUrls: ['./slider.css']
})
export class CustomeComponent implements OnInit {
constructor(
    private _renderer2: Renderer2,
    @Inject(DOCUMENT) private _document
) { }

ngOnInit(): void {
    let script = this._renderer2.createElement('script');
    script.type = `text/javascript`;
    script.text = `
        {
            $(document).ready(function () {
                setTimeout(function(){
                     $('#inforSlider').lightSlider({
                        adaptiveHeight: true,
                        item: 1,
                        slideMargin: 0,
                        loop: true
                      });
                },500);
            });
        }
    `;
    this._renderer2.appendChild(this._document.body, script);
    }
}

这篇关于使用带有angular4的光滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！