無法將數據映射庫導入到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中

回答

相關問題