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

Question

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

首先，我安装了 jQuery 插件。

npm i jquery

然后，我添加了打字稿定义。

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：Peters 解决方案的占位符

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

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 的注释：

关于依赖关系的注意事项：必须在 Mapael 之前加载 jQuery 和 Raphael（以及鼠标滚轮，如果需要）才能正常工作。

地图注意事项：地图文件必须在 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"
      }
    });
  }
}

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

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