jquery - 使用带有angular4的光 slider

Question

您好，我正在使用 lightslider使用 Angular4，但我在 lightslider() 中面临初始化问题。当我在 index.html 中的任何 html 元素上初始化光 slider 时，它可以工作，但是当我导航到应该初始化 slider 的页面时，它会失败。例如，

Home.html 模板和 Home.ts 组件是我的应用程序的主页和第一页，sliderHome 元素上有 slider 和另一个页面是 Info.html 模板和 Info.ts 组件，它在 inforSlider 元素上有 slier。因此，当用户登陆第一个页面即 Home 页面时， slider 可以正常工作，但是当用户从该页面导航到 Info 页面时， slider 无法正常工作，它应该是因为，它没有被初始化。加载特定组件时如何初始化它。

代码如下，放在index.html页面(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);
});

Answer 1

我已使用以下代码修复此问题，我已将此代码放在需要初始化 slider 的组件中。

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