angular - 如何将 Ekko Lightbox 导入到我的 Angular 7 项目中？

Question

我正在尝试在我的 Angular 项目中使用 Ekko 灯箱。我有一个想要专门使用它的组件，但我不确定如何将正确的文件导入到组件中。

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

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

这是我的 Angular 组件代码。（我已经导入了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 文件，但它仍然无法正常工作

标签： angulartypescriptbootstrap-4lightbox

Answer 1

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

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