jquery - 如何将外部 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 并使其可用。现在，无论您想要哪个插件，下载其源文件，将这些文件保存在您的 Assets 文件夹中，然后将该文件导入您的 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"'}); 

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