Question

我无法让lightbox 2在Angular 2中工作。我按照文档中的说明进行设置，但我总是收到错误“Uncaught TypeError：this。$ lightbox.css（...） .fadeIn不是一个函数“。我找不到任何示例代码来实现这一点。

Answer 1

如果您使用的是Angular CLI，请像导入任何其他外部/ 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，则可以链接到内置jQuery支持附带的以下Lightbox js文件，

"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"

        ],

获取lightbox 2在Angular 2中工作？

3 个答案: