我目前正在尝试让自己了解 Angular 4。对于一个项目，我需要在 Angular 应用程序中使用“HERE map ”显示 map 。 但是我不知道如何在保持对组件内类的访问权限的同时导入脚本。
我正在尝试按照此处的说明进行操作: 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 文件注入(inject)到组件或服务中，以便使用 .js 文件中包含的类。但是我无法让它工作。
我希望把这部分放在:
var platform = new H.service.Platform({
'app_id': '****',
'app_code': '****',
useCIT: true
});
...以某种方式进入 OnInit() 方法。但是“H”对象永远不会被识别。使用平面旧的 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>
map 正在显示，但现在我需要添加一个事件监听器，但无法识别第三个包(“mapjs-mapevents.js”)中的 H.mapevent 类。
我如何告诉 Angular 在第三个脚本中查找其他类？
最佳答案
你可以在特定的组件中添加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);
}关于javascript - 将第三方 JavaScript 文件添加到 Angular 4，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46668620/