我目前正在尝试将自己读入Angular 4.对于一个项目，我需要使用＆＃34; HERE Maps＆＃34;在Angular App中。 但我无法弄清楚如何导入脚本，同时保持对组件中类的访问。
我正在尝试按照此处的说明操作： 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（）方法。但是＆＃34; H＆＃34;对象永远不会被识别。使用平面旧的JavaScript和Html我可以让它工作。
在Angular 4中导入此类JavaScript文件的正确方法是什么？如何访问其类和方法？
更新
我的代码目前看起来像这样： 模板：
<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，但是第三个包中的H.mapevent类（＆＃34; mapjs-mapevents.js＆＃34;）无法识别。
我如何告诉Angular在其他类的第三个脚本中查看？
答案 0 :(得分：2)
您可以在特定组件中添加js，例如
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);
}
答案 1 :(得分：1)
我回答我自己的问题：
将脚本超链接添加到index.html是正确的方法。我错过了将Javascript代码翻译为TypeScript的TypeDefinition。
https://www.npmjs.com/package/@types/heremaps
上面的链接显示了获取这些内容的位置。它可以通过以下方式安装：
npm install --save @types/heremaps
相关文件安装在＆＃34; node-modules / @ types /..." 如以下问题的答案中所述：
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);
}
}
答案 2 :(得分：0)
导入js文件的最简单方法是将其添加到角度cli项目（将其添加到.angular-cli-package.json中的脚本），然后简单地： 1 - 使用正确的用户+键将其作为root（）添加到主应用程序模块 2 - “从组件中的' heremaps '导入HereMap，不仅'声明var H：any;”因为它不表示lib路径。在某些情况下你可以做到这两点，但是使用angular 4我会使用import。