可以在Angular 2中使用灯箱2吗? [英] Get lightbox 2 working in Angular 2?
问题描述
我无法让灯箱2 在Angular 2中工作.我将其设置为文档中有描述，但是我总是收到错误信息:未捕获的TypeError:this.$ lightbox.css(...).fadeIn不是函数".我找不到任何示例代码使此工作.
I can't get lightbox 2 to work in Angular 2. I set it up as described in the documentation, but I always get the error "Uncaught TypeError: this.$lightbox.css(...).fadeIn is not a function". I can't find any example code getting this working.
推荐答案
如果您使用的是Angular CLI，则就像导入其他任何外部/jQuery库一样.
If you are using Angular CLI, do it like you import any other external/jQuery libs.
所以:
- npm install --save lightbox2
-
将样式添加到angular-cli.json:
- npm install --save lightbox2
add styles to angular-cli.json:
"styles": [
"styles.css",
"../node_modules/lightbox2/dist/css/lightbox.min.css"
],
"styles": [
"styles.css",
"../node_modules/lightbox2/dist/css/lightbox.min.css"
],
将脚本添加到angular-cli.json
add script to angular-cli.json
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/lightbox2/dist/js/lightbox.min.js"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/lightbox2/dist/js/lightbox.min.js"
],
将图像添加到模板中，例如(与语义ui一起使用)
add the images to your template, e.g (using with semantic ui)
<a href="/assets/img/flag.png" data-lightbox="image" data-title="My caption">
<img class="ui bordered small image" src="/assets/img/flag.png">
</a>
<a href="/assets/img/flag.png" data-lightbox="image" data-title="My caption">
<img class="ui bordered small image" src="/assets/img/flag.png">
</a>
这篇关于可以在Angular 2中使用灯箱2吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
