Javascript 如何将jQuery插件Mapael包含到Angular 5中？

所以，我试着了解一下其他问题是如何处理包含jQuery插件的问题的。但让我们先从基础开始

首先，我安装了jQuery插件

npm i jquery

然后，我添加了typescript定义

npm install -d @types/jquery

我把它包括在我的脚本数组中

"apps": [{
  ...
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
  ],
  ...
}]

然后，我尝试了一下它是否有效

import { Component, OnInit} from '@angular/core';
import * as $ from 'jquery';

@Component({
  selector: 'app-ww-inventory-map',
  templateUrl: './ww-inventory-map.component.html',
  styleUrls: ['./ww-inventory-map.component.scss']
})
export class WwInventoryMapComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    $(window).click(function () {
      alert('ok');
      });
  }


}

反应迅速

到目前为止，一切顺利。第一个工作包已经完成，是时候继续了。然后我安装了jQuery插件mapael

npm i jquery-mapael

angular-cli.json

"apps": [{
  ...
  "scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/jquery-mapael/js/jquery.mapael.min.js",
    "../node_modules/jquery-mousewheel/jquery.mousewheel.js"
  ],
  ...
}]

在那之后我试过这个。基于官方页面上的代码示例

起初情况看起来不错，没有显示任何警告或问题，但当我加载页面时

所以，我不知道如何正确地做到这一点。我希望我能以某种方式解决这个问题。但其他几个例子对我都没有多大帮助。我很抱歉，我知道有类似的问题，但我真的无法让它发挥作用

编辑1:我尝试的第一个解决方案来自Naga Sai A，但就我而言，它需要一些更改，因此编译器不会抱怨。谢谢你，娜迦赛亚

我的ts看起来很好

import { Component, OnInit } from '@angular/core';
import * as $ from 'jquery';
import 'jquery-mapael';
import 'jquery-mapael/js/maps/world_countries.js';

declare global {
  interface JQuery {
    mapael(map: any): JQuery;
  }
}

@Component({
  selector: 'app-ww-inventory-map',
  templateUrl: './ww-inventory-map.component.html',
  styleUrls: ['./ww-inventory-map.component.scss']
})
export class WwInventoryMapComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    $(".container").mapael({
      map: {
        name: "world_countries"
      }
    });
  }
}

编辑2：彼得斯解决方案的占位符

---

导入是正确的，但组件仍然需要导入。此外，不需要包含Raphael.js。至少我没有，而且这张地图工作得很好。我的设置没有改变。而且，我保留了我最初的申报方式

主要问题在于脚本导入。您没有为Raphael导入所需的依赖项。此外，还需要导入计划使用的所有地图。将angular-cli.json更新为以下内容：

“脚本”：[
“./node_modules/jquery/dist/jquery.min.js”，
“./node_modules/raphael/raphael.min.js”，
“./node_modules/jquery mouseweel/jquery.mouseweel.js”，
“./node_modules/jquery mapael/js/jquery.mapael.min.js”，
“./node_modules/jquery mapael/js/maps/world_countries.min.js”
]，

要获得预期的结果，请使用下面的选项导入jquery、jquery mapael和js for world countries map

import * as $ from 'jquery';
import 'jquery-mapael';
import 'jquery-mapael/js/maps/world_countries.js';

在恩戈尼特

 ngOnInit() {
   $(".container").mapael({
      map: {
        name: "world_countries"
      }
    });
  }

它的工作原理如屏幕截图所示

---

declare var$：任何可能有用的，我一到家就试试！无论您试图做什么，都应该避免使用jquery。相信我，我很想避免使用jQuery，但我还没有见过任何类似的地图设计，这个特殊任务要求我使用mapael@fastAsTortoise@ak.leimrey，我已经用mapael import更新了我的anwer，这似乎很有效，希望它对您有用为什么您会选择使用jQuery库的导入，而不是像我在回答中指出的那样在angular cli中定义它们？我也有点不确定，为什么你至少不相信我的答案，在这个答案出现前30分钟，我的答案指出了问题所在？我更愿意将jQuery包添加到angular-cli.json中，特别是如果这将在多个组件中使用，以避免在多个组件中重复导入语句。是@Peter，为了使组件可重用，可以将此ca导入到一个组件中并重用该组件，我试图调试这个问题-mapel不是一个函数，在正确导入后它工作了，所以我更新了so。我将测试您的解决方案并更新我的答案对不起，我的回复太晚了。坐火车花了我太长时间。这个解决方案确实工作得很好，但它仍然需要一些更改，因此编译器不会抱怨。我将在我的问题中添加它，并尝试Peter的回答。编译器问题可能是由于声明，我在导入jquery后删除了它，jquery Mapael虽然我喜欢这两种解决方案，但我更喜欢这一个，因为您费尽周折为问题提供了更多信息。此外，虽然本项目并不特别需要它，但它更适合于可重用组件。非常感谢彼得！

 ngOnInit() {
   $(".container").mapael({
      map: {
        name: "world_countries"
      }
    });
  }