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

Question

所以，我尝试了解其他问题如何处理包含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"
  ],
  ...
}]

之后我尝试了这个。基于官方页面上看到的代码示例 https://www.vincentbroute.fr/mapael/#basic-code-example

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

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"
      }
    });
  }
}

一开始看起来一切正常，没有警告或问题显示，但当我加载页面时...

所以，我不知道如何正确地做这件事。我希望能想办法解决这个问题。但是其他几个例子都没有对我有太大的帮助。我很抱歉，知道已经有类似的问题，但我真的无法让它正常工作。

编辑1：我尝试的第一个解决方案来自Naga Sai A，但在我的端上需要进行一些更改，以便编译器不会抱怨。谢谢，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。至少我没有，地图工作得很好。我的设置没有改变。此外，我保留了最初的声明方式。

- ak.leimrey

---

声明变量 $: any 可能会有所帮助。 - Naga Sai A

我一回家就会试试这个！ - ak.leimrey

无论你想做什么，都应该避免使用jQuery。你应该按照Angular的方式来处理事情。 - fastAsTortoise

相信我，我很想避免使用jQuery，但我没有看到任何类似的地图设计，而这个特定的任务要求我使用mapael。@fastAsTortoise - ak.leimrey

你可以查看amCharts或其他不依赖于jQuery的库。 - fastAsTortoise

@ak.leimrey，我已经更新了我的答案，并添加了Mapael导入，看起来它正在工作，希望对你有用。 - Naga Sai A

Answer 1

主要问题出在你的脚本引入上。你没有引入Raphael所需的依赖项。此外，你需要引入你计划使用的任何地图。请更新你的angular-cli.json如下：

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js",
  "../node_modules/raphael/raphael.min.js",
  "../node_modules/jquery-mousewheel/jquery.mousewheel.js",
  "../node_modules/jquery-mapael/js/jquery.mapael.min.js",
  "../node_modules/jquery-mapael/js/maps/world_countries.min.js"
],

NPM的说明：

依赖项说明：jQuery和Raphael（如果需要，还包括Mousewheel）必须在Mapael之前加载才能正常工作。

地图说明：地图文件必须在Mapael之后加载才能正常工作。

https://www.npmjs.com/package/jquery-mapael#directly-in-your-page

import { Component, OnInit } from '@angular/core';

//jquery declaration
declare var $: any;

@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"
      }
    });
  }
}

- Pete

---

虽然我喜欢这两个解决方案，但我更喜欢这个，因为它提供了额外的信息来解决问题。即使在这个项目中不是必需的，但对于可重用组件来说更好。非常感谢，Peter！ - ak.leimrey

Answer 2

为了达到预期的结果，请使用以下导入jQuery、jQuery-mapael和JS的选项来获取世界地图。

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

并且在 ngOnInit 中

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

它的工作方式如截图所示

- Naga Sai A

---

为什么您要选择在使用angular-cli时将jQuery库导入而不是像我的答案中指出的那样定义它们？我也有点不确定为什么您至少没有给我的答案点个赞，因为它在这个答案之前30分钟就已经指出了这个问题？如果这将在多个组件中使用，我更愿意将jQuery包添加到angular-cli.json中，以免在多个组件中重复导入语句。 - Pete

是的@Peter，为了制作可重用的组件，可以将其导入到一个组件中并重复使用该组件。我试图调试问题- mapel不是一个函数，在正确导入后它起作用了，所以我已经更新了SO。我会测试你的解决方案并更新我的答案。 - Naga Sai A

抱歉回复晚了，火车上花费的时间太长了。这个解决方案确实很有效，但仍需要一些更改，以便编译器不会报错。我会在我的问题中添加它，并尝试Peter的回答。 - ak.leimrey

编译器问题可能是由于声明引起的，我在导入jQuery和jQuery-mapael后将其删除了。 - Naga Sai A