如何将外部 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

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

这将安装 jQuery 并使其可用。现在，无论您想要哪个插件，下载其源文件，将这些文件保存在您的资产文件夹中并将该文件导入到您的index.html As中，对于您来说，您需要将此代码保存在您的As中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"'}); 

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