让灯箱 2 在 Angular 2 中工作？

Question

我无法让 lightbox 2 在 Angular 中工作 2. 我按照文档中的描述进行了设置，但我总是收到错误 "Uncaught TypeError: this.$lightbox.css(...).fadeIn is not a function"。我找不到任何示例代码让这个工作。

Answer 1

如果您正在使用 Angular CLI，请像导入任何其他 external/jQuery 库一样进行操作。

所以：

npm install --save lightbox2
添加样式到angular-cli.json:

"styles": [ "styles.css", "../node_modules/lightbox2/dist/css/lightbox.min.css" ],
添加脚本到angular-cli.json

"scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/lightbox2/dist/js/lightbox.min.js" ],
将图像添加到您的模板，例如（使用语义 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>

Answer 2

如果不想单独使用jQuery，

如果你的项目没有jQuery支持，又不想单独使用jQuery，你可以link到下面的Lightbox js文件，它是inbuild自带的jQuery支持，

"scripts": [    
    "../node_modules/lightbox2/dist/js/lightbox-plus-jquery.js"
]

Answer 3

如果你想使用 lightbox2 然后先安装 jquery ..

cmd:npm install jquery --save

安装完成后，

cmd:npm install lightbox2 --save

然后在angular.json文件中添加样式文件

"styles": [

          "./node_modules/jquery/dist/jquery.min.js", // jquery always used before the lightbox2
          "./node_modules/lightbox2/dist/js/lightbox-plus-jquery.min.js",
          "./node_modules/bootstrap/dist/css/bootstrap.min.css",
          "./node_modules/lightbox2/dist/css/lightbox.min.css"

        ],

让灯箱 2 在 Angular 2 中工作？

Get lightbox 2 working in Angular 2?

lightbox2

angular