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

我正在构建一个用于学习目的的小角度2应用程序，并且我打算将datamaps用于地图界面。无法将数据映射库导入到Angular 2应用程序的HTML中

但是这个库还没有指令，所以我正在尝试自己的热线。

我已经安装了数据映射

NPM安装的资料地图

，我使用NG从角CLI发球局，但我不能让它工作，我已经试过进口它直接在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）

这里是我的组件至今

进口{组件，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); 
    } 

} 

}

来源

2016-10-28 Cristiano Fontes

所以你知道如何包含脚本。现在从Angular使用它，你有几个选择。

选项1（快速和肮脏的，但工程）：创建一个常量的数据图（假设库中的JavaScript对象被称为“数据地图”）对您的组件与顶部：

const Datamap;

然后使用当涉及到调用新的数据图对象：

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

选项2（越复杂，但更好的方法我还没有与该组件做到了这一点，但这个想法是对所有外部组件相同。）通过将应用程序启动时的Datamap组件注入到Angular组件中来引导它。

更多选项也被记录在这里：How to pass parameters rendered from backend to angular2 bootstrap method

来源

2016-10-29 04:47:56

不错，谨慎讲究还是指点我第二种方法的正确方向？ –

我的意思是那里有一个文件？ –

我有一个链接到另一个stackoverflow帖子。今天晚些时候我回到家后我会把它给你。 –

终于得到它读this

后工作不正是我一直在寻找的，因为它是角的范围之外，我还不能使用它作为一个组件的一部分..但至少地图现在正在显示。

在angular-cli.json中添加了以下几行，并且可用。

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

来源

2016-10-29 00:02:58

而不是使用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(); 
    }

来源

2016-12-01 23:11:08

-1

它的工作原理如下下面的步骤之后：

1）NPM安装数据地图 2）包括 “allowJs”：在tsconfig.json 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(); 
     }

来源

2017-09-08 08:33:20

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

回答

相关问题