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

Question

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

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

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

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

此时此刻，我：

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

现在，我在控制台中收到一个错误，没有找到我的usa.svg文件(404)。当我将svg文件移动到src文件夹中时，它会显示在页面上，但是所有插件功能都无法工作。

有人能帮我做一下这个实现吗？

Answer 1

首先，您需要使用JQuery安装npm install jquery --save，然后在.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

在角度构建配置中添加依赖项。假设应用程序是使用角巩膜搭建的，这里是一个角度为6.x和更低版本的例子。

取决于版本，有一个角/角-cli配置文件。

角6.x -> angular.json

角2.x-5.x .angular-cli.json (隐藏文件)

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

​

​

然后最后添加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>元素通过方法调用或条件通过*ngIf出现时调用。