javascript - 如何在Angular 5中包含jQuery Plugin Mapael？

因此，我尝试了一下其他问题如何处理包括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那里获得的，但是-就我而言-它需要进行一些更改，因此编译器不会抱怨。谢谢，永生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。至少我没有，而且 map 也很出色。我的设置没有改变。另外，我保留了最初的声明方式。

最佳答案

主要问题与脚本导入有关。您没有为Raphael导入必需的依赖项。另外，您需要导入计划使用的所有 map 。将您的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，以使其正常工作。

关于 map 的注意事项: map 文件必须在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"
      }
    });
  }
}