Как мне импортировать Ekko Lightbox в мой проект Angular 7? - PullRequest
Новая
       25

Как мне импортировать Ekko Lightbox в мой проект Angular 7?

0 голосов
/ 20 декабря 2018

Я пытаюсь использовать лайтбокс Ekko в своем угловом проекте.У меня есть компонент, в котором я хочу специально его использовать, и я не уверен, как импортировать нужные файлы в компонент.

Я установил Ekko через NPM, и все файлы перечислены в "node_modules / Ekko-lightbox"

Документация для Ekko приведена здесь: http://ashleydw.github.io/lightbox/

Здесьмой код углового компонента(Я уже импортировал Jquery и добавил код функции в NgOnInIt) 

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



@Component({
  selector: 'app-graphic-design',
  templateUrl: './graphic-design.component.html',
  styleUrls: ['./graphic-design.component.css', '/node_modules/ekko-lightbox/dist/ekko-lightbox.css']
})
export class GraphicDesignComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    $(document).on('click', '[data-toggle="lightbox"]', function(event) {
      event.preventDefault();
      $(this).ekkoLightbox();
  });
  }

}

Я также добавил пример кода HTML, указанный в документации в моем компоненте HTML 

<a href="https://unsplash.it/1200/768.jpg?image=251" data-toggle="lightbox">
  <img src="https://unsplash.it/600.jpg?image=251" class="img-fluid">
</a>

Изображение всплываетвверх, однако, когда я нажимаю, ничего не происходит.Это также, кажется, не реагирует вообще.

Вот мой angular.json Я связал скрипты и CSS-файлы, но он все еще не работает

enter image description here

1 Ответ

0 голосов
/ 20 декабря 2018

Внутри angular.json, пожалуйста, включите стиль и файлы скриптов, связанные с лайтбоксом.Это должно работать. 

"styles": [
  "styles.css"
],
"scripts": [],
...