如何将Ekko Lightbox导入到Angular 7项目中？

Question

我正在尝试在我的角度项目中使用Ekko灯箱。我有一个要专门用于它的组件，并且不确定如何将适当的文件导入该组件。

我通过NPM安装了Ekko，所有文件都列在“ node_modules / Ekko-lightbox”下

此处列出了Ekko的文档：http://ashleydw.github.io/lightbox/

这是我的Angular Component代码。 （我已经导入了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>

图像弹出，但是当我单击它时什么也没有发生。它似乎也根本没有响应。

这是我链接了脚本和CSS文件的angular.json，但仍然无法正常工作

Answer 1

在angular.json中，请包含与灯箱相关的样式和脚本文件。应该可以。

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