Question

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

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

代码如下所示，它放在Info页面（主页）

中

index.html

Answer 1

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

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

Answer 2

您可以通过导入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);
}

使用带角度4的光滑块

2 个答案: