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

角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更新为以下内容：

＆＃13;

"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"
],

＆＃13;

NPM的注释：

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

关于地图的注意事项：必须在Mapael之后加载地图文件才能正常工作。

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

另外，我会推荐Naga Sai在组件中声明jQuery的方法：

＆＃13;

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

＆＃13;

Answer 2

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

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

和ngOnInit

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

如截图

所示

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

2 个答案: