javascript - 如何在 Angular 4+ 中添加/使用 lightGallery 插件？

Question

我一直在尝试使用lightGallery在我的 Angular 4 项目中，我可以通过将这些添加到 index.html 文件中来使其工作

 <script src="https://cdn.jsdelivr.net/npm/lightgallery.js@1.0.2/dist/js/lightgallery.min.js"></script>

然后

<script>
    lightGallery(document.getElementById('lightgallery'));
</script>

问题我如何在 Angular 代码( typescript )中使用 lightGallery，因为我可以在加载(动态内容)图片时调用 lightGallery()？

我尝试了很多选项，比如 this

或如何在 Angular 组件中使用自定义 JavaScript 代码？

Answer 1

在完成下面描述的步骤后，我能够使用该库

1. 将 lightgallery.js 库文件添加到本地文件夹(assets)

2. 将文件路径添加到 .angular-cli.json 的脚本数组中

   “脚本”:[
“../src/assets/js/lightgallery.min.js”
]

3. 在style.css文件中导入lightgallery.css文件

   @import "~lightgallery.js/dist/css/lightgallery.css";//在 style.css 之上添加这个

4. 将这行代码添加到组件类文件之上，需要的地方

   声明 var lightGallery: any;//这将防止 typescript 编译器提示找不到“lightGallery”

5. 如下所示在组件内的任意位置调用 lightGallery

   lightGallery(document.getElementById('lightgallery'));