將第三方JavaScript文件添加到Angular 4

我目前正在嘗試將自己閱讀爲Angular 4.對於一個項目，我需要在Angular App中使用「HERE Maps」顯示地圖。但我不知道如何導入腳本，同時保持訪問組件內的類。將第三方JavaScript文件添加到Angular 4

我試圖遵循這裏的指令： https://developer.here.com/documentation/maps/topics/quick-start.html

我嘗試添加的.js文件腳本中的index.html像這樣：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>See720</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="http://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script> 
    <script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script> 
    <script type="text/javascript"> 
    var platform = new H.service.Platform({ 
     'app_id': '****', 
     'app_code': '****', 
     useCIT: true 
    }); 
    </script> 
</head> 
<body> 
    <app-root></app-root> 
</body> 
</html>

我試圖以某種方式注入的.js文件轉換爲組件或服務以便使用.js文件中包含的類。然而我無法讓它工作。

我希望把這個部分：

var platform = new H.service.Platform({ 
    'app_id': '****', 
    'app_code': '****', 
    useCIT: true 
});

...爲的OnInit（）方法，不知何故。但是「H」對象從未被識別。使用平面舊的JavaScript和Html我可以得到這個工作。

什麼是在Angular 4中導入這樣一個JavaScript文件的正確方法，以及如何訪問它的類和方法？

UPDATE

我的代碼目前看起來是這樣的：模板：

<div style="text-align:center"> 
    <!--<div><font color="white">This is some text!</font></div>--> 
    <div id="mapContainer" style="width: 900px; height: 600px"></div> 
</div>

組件：

import {AfterViewInit, Component} from '@angular/core'; 

declare var H: any; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements AfterViewInit { 
    title = 'C720'; 

    ngAfterViewInit() { 
    // Initialize the platform object: 
    let platform = new H.service.Platform({ 
     'app_id': '****', 
     'app_code': '****', 
     useCIT: true 
    }); 

    // Obtain the default map types from the platform object 
    let defaultLayers = platform.createDefaultLayers(); 

    // Instantiate (and display) a map object: 
    let map = new H.Map(
     document.getElementById('mapContainer'), 
     defaultLayers.normal.map, 
     { 
     zoom: 5, 
     center: { lat: 52.5, lng: 13.5 } 
     } 
    ); 
    } 
}

的index.html：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>See720</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="http://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script> 
    <script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script> 
    <script src="http://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script> 
</head> 
<body> 
    <app-root></app-root> 
</body> 
</html>

地圖正在顯示，但現在我需要添加一個eventlistener，但第三個包（「mapjs-mapevents.js」）中的H.mapevent類無法識別。

如何告訴Angular查看其他類的第三個腳本？

來源

2017-10-10 j.unruh

這已經回答了 - > https：//開頭計算器.com/questions/37081943/angular2-import-external-js-file-into-component – mutantkeyboard

謝謝你的鏈接@mutantkeyboard。我更新了上面的問題。我如何從另一個腳本訪問同一對象上的類？ –

如果您使用的是Angular CLI，請使用'scripts'：https://stackoverflow.com/questions/38855891/angular-cli-webpack-how-to-add-or-bundle-external-js-files#答案-39661714 –

導入js文件的最簡單方法是將其添加到角度cli項目（將其添加到.angular-cli-package.json中的腳本），然後簡單地： 1 - 將它添加到主應用程序模塊，作爲根（），用正確的用戶+鍵 2 - 「在組件中導入HereMap'heremaps'不僅'聲明var H：any;'因爲它不表示lib路徑。在某些情況下，你可以同時使用這兩種方法，但使用角度4我可以使用import

https://www.npmjs.com/package/angular-heremaps

來源

2017-10-11 08:46:04 andrea06590

謝謝你的回答。我如何實現第1步？你能告訴我一個例子嗎？我對Angular相當陌生，似乎並不瞭解所有的核心概念。 –

您提供的鏈接指向了angularjs的npm包。據我所知它不可能使用角度2/4的angularjs代碼。 –

當然，可能是js或者angular js包，如果你想和打字稿一起使用，那麼你可以得到這些類型。要實現第1步，請首先獲取看起來符合您需求的包裝。 – andrea06590

您可以像

ngOnInit(){ 
 
    var scriptUrl = 'http://js.api.here.com/v3/3.0/mapsjs-core.js'; 
 
    let node = document.createElement('script'); 
 
    node.src = scriptUrl; 
 
    node.type = 'text/javascript'; 
 
    node.async = true; 
 
    node.charset = 'utf-8'; 
 
    document.getElementsByTagName('head')[0].appendChild(node); 
 
}

來源

2017-10-11 11:12:47 Punith

特別是組件添加JS生病回答我的問題：

添加腳本鏈接到index.html的是正確的做法。我錯過了將Javascript代碼翻譯成TypeScript的TypeDefinition。

https://www.npmjs.com/package/@types/heremaps

上面的鏈接顯示在哪裏得到這些。它可以通過被安裝：

npm install --save @types/heremaps

的根據文件被安裝到「節點模塊/ @類型/ ...」作爲一個答案描述以下問題：

Angular2: import external js file into component

我還需要添加：

declare var test: any;

我的組件。

我現在可以訪問所有五個外部腳本的所有功能。而我的項目看起來有點像這樣：

的index.html

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>See720</title> 
    <base href="/"> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="favicon.ico"> 

    <link rel="stylesheet" href="http://js.api.here.com/v3/3.0/mapsjs-ui.css" /> 
    <script src="http://js.api.here.com/v3/3.0/mapsjs-core.js" type="text/javascript" charset="utf-8"></script> 
    <script src="http://js.api.here.com/v3/3.0/mapsjs-service.js" type="text/javascript" charset="utf-8"></script> 
    <script src="http://js.api.here.com/v3/3.0/mapsjs-ui.js" type="text/javascript" charset="utf-8"></script> 
    <script src="http://js.api.here.com/v3/3.0/mapsjs-mapevents.js" type="text/javascript" charset="utf-8"></script> 
    <script src="http://js.api.here.com/v3/3.0/mapsjs-pano.js" type="text/javascript" charset="utf-8"></script> 

</head> 
<body> 
    <app-root></app-root> 
</body> 
</html>

app.component.ts

import {AfterViewInit, Component} from '@angular/core'; 

declare var H: any; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements AfterViewInit { 
    title = 'C720'; 

    ngAfterViewInit() { 
    // Initialize the platform object: 
    let platform = new H.service.Platform({ 
     'app_id': '****', 
     'app_code': '****', 
     useCIT: true 
    }); 

    document.body.style.backgroundColor = 'black'; 

    // Obtain the default map types from the platform object 
    let defaultLayers = platform.createDefaultLayers(); 

    // // Instantiate (and display) a map object: 
    let map = new H.Map(
     document.getElementById('mapContainer'), 
     defaultLayers.normal.map, 
     { 
     zoom: 5, 
     center: { lat: 52.5, lng: 13.5 } 
     } 
    ); 
    // document.getElementById('whiteSpace').style.backgroundColor = 'white'; 
    // Enable the event system on the map instance: 
    var mapEvents = new H.mapevents.MapEvents(map); 
    var ui = H.ui.UI.createDefault(map, defaultLayers); 

    // Add event listeners: 
    map.addEventListener('tap', function(evt) { 
     // Log 'tap' and 'mouse' events: 
     console.log(evt.type, evt.currentPointer.type); 
    }); 

    // Instantiate the default behavior, providing the mapEvents object: 
    var behavior = new H.mapevents.Behavior(mapEvents); 
    } 
}

來源

2017-10-11 13:12:36

將第三方JavaScript文件添加到Angular 4

回答

相關問題