让灯箱 2 在 Angular 2 中工作？ [关闭]答案

【问题标题】：Get lightbox 2 working in Angular 2? [closed]让灯箱 2 在 Angular 2 中工作？ [关闭]
【发布时间】：2017-02-08 17:31:14
【问题描述】：

我无法让 lightbox 2 在 Angular 2 中工作。我按照文档中的说明进行了设置，但我总是收到错误“Uncaught TypeError: this.$lightbox.css(...).fadeIn不是函数”。我找不到任何让这个工作的示例代码。

【问题讨论】：

标签： angular lightbox2

【解决方案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>

【讨论】：

Angular 新手，正在努力寻找 angular-cli.json。它实际上是 .angular-cli.json 。这意味着开头有一个 DOT。
谢谢你，斯库马尔。这是因为 Angular CLI 自发布此答案以来已重命名其配置文件。我会保持原样。
啊……因为我是 Angular 的新手。我之前不知道是这样的......当他们（Angular）在每个新版本中更改这样的东西时，很难理解。谢谢你告诉我！

【解决方案2】：

如果不想单独使用jQuery，

如果您的项目中没有jQuery 支持并且您不想单独使用jQuery，您可以链接到以下Lightbox js 文件，该文件带有内置jQuery 支持，

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

【讨论】：

【解决方案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"

        ],

【讨论】：