无法将数据映射库导入 Angular 2 应用程序的 HTML

Question

我正在构建一个用于学习目的的小型 angular 2 应用程序，我计划将 datamaps 用于地图界面。

但是这个库还没有指令，所以我想自己热线。

我已经安装了数据地图

npm install datamaps

我正在使用来自 angular-cli 的 ng serve，但我无法让它工作，我尝试直接在 HTML 中导入它（只是为了看看它是否有效) 并且找不到库。

我通过直接 HTML 导入获得此文件，即使文件位于正确的位置也不会发送到浏览器

datamaps.world.hires.min.js:1 Uncaught SyntaxError: Unexpected token <

我将它添加到我的 package.json 中并尝试在我的组件中使用它，但也找不到它。

在我的 package.json

中像这样

"datamaps": "^0.5.8"

我的html如果这样使用应该怎么办才能看到:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>AskTheWorld</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
  <script src="../node_modules/datamaps/dist/datamaps.world.hires.min.js"></script>
</head>
<body>
  <app-geochart-component>Loading...</app-geochart-component>
  <div id="container" style="position: relative; width: 500px; height: 500px;"></div>
  <script>
    var map = new Datamap({element: document.getElementById('container')});
  </script>
</body>
</html>

此外，将其导入我的组件的最佳方式是什么？我已经看到数据映射没有声明类型或我能找到的模块（我使用的是 TS 2）

到目前为止，这是我的组件

从“@angular/core”导入{组件、OnInit、ViewChild}；从'../../../node_modules/datamaps/dist/??????????????';

导入{Datamap}

@Component({
  selector: 'app-geochart-component',
  templateUrl: './geochart-component.component.html',
  styleUrls: ['./geochart-component.component.css']
})
export class GeochartComponentComponent implements OnInit {

  @ViewChild('container') canvas;

  constructor() { }

  ngOnInit() {
    var map = new Datamap(this.canvas);
  }

}

}

Answer 1

阅读后终于开始工作了 this

不完全是我要找的东西，因为它超出了 angular 的范围，我还不能将它用作组件的一部分...但至少地图现在正在显示.

将以下行添加到 angular-cli.json 并且可用。

  "scripts": [
    "../node_modules/datamaps/dist/datamaps.world.min.js"
  ],

Answer 2

所以你知道包含脚本的方法了。现在要从 Angular 使用它，您有几个选择。

选项 1（快速而肮脏但有效）：在组件顶部创建一个 const Datamap（假设库的 JavaScript 对象称为 "Datamap"）：

const Datamap;

然后在调用新数据映射时使用该对象：

ngOnInit() {
  var map = new Datamap(this.canvas);
}

选项 2（更复杂但更好的方法。我没有对那个组件执行此操作，但所有外部组件的想法都是相同的。）Bootstrap 应用程序启动时的 Datamap 组件将其注入 Angular 组件。

此处也记录了有关选项的更多信息：

Answer 3

而不是使用 javascript 来显示地图：

<script> var map = new Datamap({element: document.getElementById('container')}); </script>

创建一个 @ViewChild 也不是必需的 ngOnInit() 只需添加 ngAfterContentInit() 例如：

    ngAfterContentInit():void {

       var map = new Datamap({

        element: document.getElementById('container'),
        projection: 'mercator',
        fills: {
            defaultFill: "#ABDDA4",
            authorHasTraveledTo: "#fa0fa0"
        },data: {
          USA: { fillKey: "authorHasTraveledTo" },
          JPN: { fillKey: "authorHasTraveledTo" },
          ITA: { fillKey: "authorHasTraveledTo" },
          CRI: { fillKey: "authorHasTraveledTo" },
          KOR: { fillKey: "authorHasTraveledTo" },
          DEU: { fillKey: "authorHasTraveledTo" },
        }
       });

       var colors = d3.scale.category10();
     }

Answer 4

按照以下步骤操作即可：

1) npm 安装数据映射 2) 在 tsconfig.json 中包含 "allowJs": true 3) 在“.angular-cli.json”

中包含以下内容

"scripts": [
        "../node_modules/d3/d3.js",
        "../node_modules/topojson/build/topojson.js",
        "../node_modules/datamaps/dist/datamaps.world.min.js"
      ],

3) 在 html 中：

4) 在组件 ts 文件中包含以下内容：

declare var Datamap:any;
declare var d3:any;



ngAfterContentInit():void {

           var map = new Datamap({

            element: document.getElementById('container'),
            projection: 'mercator',
            fills: {
                defaultFill: "#ABDDA4",
                authorHasTraveledTo: "#fa0fa0"
            },data: {
              USA: { fillKey: "authorHasTraveledTo" },
              JPN: { fillKey: "authorHasTraveledTo" },
              ITA: { fillKey: "authorHasTraveledTo" },
              CRI: { fillKey: "authorHasTraveledTo" },
              KOR: { fillKey: "authorHasTraveledTo" },
              DEU: { fillKey: "authorHasTraveledTo" },
            }
           });

           var colors = d3.scale.category10();
         }

Answer 5

将 datamaps 文件导入您的组件。

import * as Datamap from 'node_modules/datamaps/dist/datamaps.world.min.js';

希望对您有所帮助

无法将数据映射库导入 Angular 2 应用程序的 HTML

Can't import datamap library into HTML of a Angular 2 app

npm

angular-cli

angular