将第三方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

回答

相关问题