小编Sep*_*cio的帖子

我有关于 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 文件夹中时，它会显示在页面上，但所有插件功能都不起作用。

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

这个问题类似于使用Jquery调用Angular函数

但我认为我的例子有很小的不同.

在Angular项目上我有一个按钮:

<button id="button1" #tbName title="tbName" class="btn btn-lg btn-outline-primary" (click)="open(content,tbName.title)">Launch demo modal</button>

在TS文件上有一个方法:

open(content, title) {
    console.log(document.getElementById('button1').getAttribute('title'));
    this.id_desk = document.getElementById('button1').getAttribute('title');
    this.modalService.open(content, { centered: true, container: '#test', ariaLabelledBy: 'modal-basic-title' }).result.then((result) => {

        this.closeResult = `Closed with: ${result}`;
    }, (reason) => {

        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
}

怎么看起来像jQuery函数会直接调用open(content,title)angular方法？