使用带 angular4 的光滑块答案

【问题标题】：Using light slider with angular4使用带 angular4 的光滑块
【发布时间】：2018-07-06 15:41:11
【问题描述】：

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

Home.html 模板和Home.ts 组件是我的应用程序的主页和首页，sliderHome 元素上有滑块，另一个页面是Info.htmltemplate 和Info.ts 组件，@987654328 上有滑块@ 元素。因此，当用户登陆第一页 Home 页面时，滑块正在工作，但是当用户从该页面导航到 Info 页面时，滑块无法正常工作，这是因为它没有被初始化。加载特定组件时如何对其进行初始化。

代码如下，放在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);
});

【问题讨论】：

发布代码。一些关于不工作的东西的叙述并不是真的有用
@tchelidze 我更新了代码，我认为问题在于应用程序首次加载它只能找到sliderHome元素，因为当时没有加载inforSlider元素并且当用户导航到信息页面元素时但此时脚本不会执行。
是的，这听起来很正确，因此您可以将 inforSlider 的初始化移动到相应的 html。
@tchelidze 可以发布一些代码或代码链接，以便我从那里获得参考吗？我尝试在 ngAfterViewInit 方法的组件中对其进行初始化，但它会抛出错误，例如 lightSlider is not a method 即使页面上也加载了滑块 JS。

标签： jquery html angular

【解决方案1】：

您可以通过导入 AfterViewInit 来使用“ngAfterViewInit”生命周期挂钩。 Angular Docs可以如下图使用：

import { Component, AfterViewInit } from '@angular/core';
import * as $ from 'jquery';

ngAfterViewInit() {
    this.doJqueryLoad();     
    this.doClassicLoad();

    $(this.el.nativeElement)
        .chosen()
        .on('change', (e, args) => {
            this.selectedValue = args.selected;
        });
}

doClassicLoad() {
  // A $( document ).ready() block.
  $( document ).ready(function() {
      console.log( "Unnecessary..." );
  });      
}

// You don't need to use document.ready... 
doJqueryLoad() {
    console.log("Can use jquery without doing document.ready")
    var testDivCount = $('#testDiv').length;
    console.log("TestDivCount: ", testDivCount);
}

【讨论】：

【解决方案2】：

我已经使用以下代码解决了这个问题，我已将此代码放在需要初始化滑块的组件中。

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

【讨论】：