Question

我对Angular（v4）和外部jQuery插件有疑问。我以前使用过这个jQuery插件，但是使用过asp.net而不是Angular。我的jQuery插件包含3个元素：

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

我正在从以下站点使用jQuery插件：http://mapsvg.com/documentation/jquery/

我的问题是如何将该插件添加到Angular项目中？我尝试在新的空白项目中执行此操作，但是它不起作用。

此刻我：

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

现在，我在控制台中收到一个错误，找不到我的usa.svg文件（404）。当我将svg文件移到src文件夹时，它会显示在页面上，但所有插件功能均无法正常工作。

有人可以帮我实现这一实现吗？

Answer 1

在角度构建配置中添加依赖项。假设该应用是使用angular-cli进行脚手架安装的，下面是Angular 6.x和更低版本的示例。

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

Angular 6.x-> angular.json

Angular 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元素，就可以调用

Answer 2

首先，您需要使用<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> <input type="text" id="searchboxSample" name="lname" required placeholder="searchboxSample" /> <input type="checkbox" /> <table id="devtable"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Status</th> </tr> </thead> <tbody data-bind="foreach: paginated" > <tr data-bind="click: $parent.select, css: {flash: $parent.selected() === $data}"> <td width="15"><input type="checkbox" data-bind="checkedValue: $data, checked: $parent.selected() === $data, click: function(){$parent.select($data); return true}, clickBubble: false" /></td> <td data-bind="text: ID"></td> <td data-bind="text: Name"></td> <td data-bind="text: Status"></td> </tr> </tbody> </table>ID : <input type="text" name="ID" data-bind="value: selectedID, enable: enableEdit" /> <br>Name : <input type="text" name="Name" data-bind="value: selectedName, enable: enableEdit" /> <br>Status : <input type="text" name="Status" data-bind="value: selectedStatus, enable: enableEdit" /> <br> <input type="button" value="Send" disabled/> <input type="button" value="ChangeModelData" data-bind="click: changeTableData"> <input type="text" id="lname" name="lname" required placeholder="Nachname" data-bind="value: acceptedSymptom , event: {keyup: showMessage}"/> <div class="pager"> <a href="#" class="firstpage" data-bind="click: firstpage, visible: hasPrevious">≤</a> <a href="#" class="previous" data-bind="click: previous, visible: hasPrevious">≤</a> <span class="current" data-bind="text: $root.pageNumber"></span> <a href="#" class="next" data-bind="click: next, visible: hasNext">></a> <a href="#" class="lastpage" data-bind="click: lastpage, visible: hasNext">≥</a> </div>安装JQuery，然后在.ts文件中添加npm install jquery --save

这将安装jQuery并使其可用。现在，无论您要使用哪个插件，都可以下载其源文件，将这些文件保留在资产文件夹中，然后将该文件导入您的import * as $ from "jquery";中因此，对于您来说，您需要将此代码保存在index.html

中

index.html

现在添加此div文件，您要在其中将插件实现为

<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>

最后，将组件的ngOnInit（）中的插件称为

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

这应该可以解决问题。对于任何查询，请发表评论。

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

2 个答案: