如何将外部 jQuery 插件添加到 Angular 项目

Question

我有一个关于 Angular (v4) 和外部 jQuery 插件的问题。我之前使用过这个 jQuery 插件，但使用的是 asp.net 而不是 Angular。我的 jQuery 插件由 3 个元素组成：

• 包含插件文件（css、js 文件）的文件夹
• 我需要在页面上添加的 Div 元素 (<div id="mapsvg"></div>)
• 需要在页面上添加并在页面加载时调用的 jQuery 函数 ($('#mapsvg').mapSvg({source: '/maps/usa.svg'});)

我正在使用来自该站点的 jQuery 插件：http://mapsvg.com/documentation/jquery/

我的问题是如何将这个插件添加到我的 Angular 项目中？我试图在新的空白项目中这样做，但它不起作用。

此时我：

1. 在 angular.json 中添加了对脚本的引用 -> "./src/assets/mapsvg/js/mapsvg.js"
2. 在 app.component.ts 中声明变量 -> declare var $: any;
3. 将 div 元素添加到 app.component.html 中

现在我在控制台中收到一条错误消息，提示找不到我的 usa.svg 文件 (404)。当我将 svg 文件移动到 src 文件夹时，它会显示在页面上，但所有插件功能都不起作用。

有人可以帮我完成这个实现吗？

Answer 1

首先，您需要使用npm install jquery --save 安装JQuery，然后在您的.ts 文件中添加import * as $ from "jquery";

这将安装 jQuery 并使其可用。现在，无论您想要哪个插件，下载它的源文件，将这些文件保存在您的资产文件夹中，然后将该文件导入您的 index.html 因为，对您而言，您需要将此代码保存在您的index.html

<link href="assets/mapsvg.css" rel="stylesheet">
<script type="text/javascript" src="assets/jquery.js"></script>
<script type="text/javascript" src="assets/jquery.mousewheel.js"></script>
<script type="text/javascript" src="assets/mapsvg.min.js"></script>

现在添加这个 div 文件，你想在其中实现插件

<div id="mapsvg"></div>

最后，在组件的 ngOnInit() 中调用插件

$('#mapsvg').mapSvg({source: '"assets/mapsvg.svg"'}); 

这么多应该可以解决问题。如有任何疑问，请发表评论。

Answer 2

在 Angular 构建配置中添加依赖项。 假设应用程序是使用 angular-cli 搭建的，这里是 Angular 6.x 和更低版本的示例。

根据版本，有一个 angular / angular-cli 配置文件

Angular 6.x -> angular.json

Angular 2.x - 5.x .angular-cli.json（隐藏文件）

在这两个文件中都有一个scripts 部分，其中包含一个Array。 按照在HTML 中为<script> 标签添加的顺序添加外部依赖项。

然后最后添加 jQuery 的类型定义：

npm install @types/jquery

并在您的组件中使用它：

import * as $ from "jquery";

@Component({
  selector: 'app-mycomponent',
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.scss']
})

ngOnInit() { 
    $('#mapsvg').mapSvg({source: '"assets/mapsvg.svg"'});
}

最后，可以从 ngOnInit 方法调用插件，或者每当 <div id="mapsvg"></div> 元素通过方法调用或有条件的 via*ngIf 出现时调用