Можем ли мы использовать jQuery LightSlider в Angular 7?

Question

Я делал LightSlider с angular js раньше, но я не уверен, что смогу использовать его в angular 7. Я проводил исследования несколько раз, но, похоже, ни один пример или какой-либо кодовый маневр не сделали этого. Я пытался сделать это, но это не работает. Поэтому я пришел сюда, чтобы спросить вас, ребята. Можно ли использовать слайдер Light с угловым 7. Это LightSlider

Answer 1

Вы должны быть в состоянии. Сначала убедитесь, что вы установили npm и jQuery и LightSlider и добавили их в свернутую коллекцию стилей и сценариев файла angular.json (architect / build / options):

{
  ...
  "projects": {
    "testLightSlider": {
      ...
      "architect": {
        "build": {
          "options": {
            ...,
            "styles": [
              "src/styles.scss",
              "node_modules/lightslider/dist/css/lightslider.min.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/lightslider/dist/js/lightslider.min.js"
            ]
          }
          ...

Затем просто выполните declare var $ прямо под импортом в компоненте, который вы хотите использовать LightSlider и использовать jQuery для его инициализации. Только не забывайте использовать jQuery внутри OnInit или AfterViewInit, вам придется подождать, пока будет готов шаблон компонента (jQuery требует готовности DOM)

import { Component, OnInit } from '@angular/core';
declare var $: any;

@Component({...})
export class AppComponent implements OnInit {

  public ngOnInit(): void {
    $('#target').lightSlider({
      // options here...
    });
  }
}

Надеюсь, это поможет!