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

3
我正在尝试研究Angular 4。在一个项目中,我需要使用“HERE Maps”在Angular应用程序中显示地图。 但我无法弄清楚如何导入脚本,同时保留对组件内类的访问。
我正在尝试按照HERE的说明进行操作: 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文件的正确方法是什么,如何访问其类和方法?

更新

我的代码目前看起来像这样:

<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>

地图正在显示,但现在我需要添加一个事件监听器,但第三方包(“mapjs-mapevents.js”)中的 H.mapevent 类未被识别。如何告诉 Angular 在第三个脚本中查找其他类?

1
已经有答案了 -> https://dev59.com/uloU5IYBdhLWcg3wzZLw - mutantkeyboard
谢谢您提供的链接@mutantkeyboard。我已经更新了我的问题。如何从另一个脚本访问同一对象上的类? - jns_ai_unr
如果您正在使用Angular CLI,请使用scripts:https://dev59.com/UVkT5IYBdhLWcg3wRNUR - t3__rry
3个回答

2
您可以在特定组件中添加JavaScript代码,例如:

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);
}


你能解释一下node、 node.src、 node.type、 node.async、 node.charset是什么吗? - user10997800

2

我来回答自己的问题:

将脚本超链接添加到index.html是正确的方法。我漏掉了一种类型定义,将Javascript代码转换为TypeScript。

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

上面的链接显示了如何获取这些内容。可以通过以下方式安装:

npm install --save @types/heremaps

相应的文件被安装在“node-modules/@types/…”中,如下面问题的答案所述:

Angular2:将外部js文件导入组件

我还需要添加:

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);
  }
}

0

导入JS文件的最简单方法是将其添加到Angular CLI项目中(将其添加到.angular-cli-package.json中的脚本中),然后简单地执行以下步骤: 1- 将其作为root()添加到您的主应用程序模块中,并使用正确的用户+密钥 2- 在组件中"import HereMap from 'heremaps'",而不仅仅是使用"declare var H: any;",因为它不指示库路径。在某些情况下,您可以同时执行这两个操作,但是在Angular 4中我使用import。

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


谢谢你的回答。我该如何完成第一步?你能给我一个例子吗?我是 Angular 的新手,似乎还没有理解所有的核心概念。 - jns_ai_unr
您提供的链接指向了一个用于AngularJS的npm包。据我所知,无法将AngularJS代码与Angular 2/4一起使用。 - jns_ai_unr
当然可以,无论是js还是angular js包,如果你想要在typescript中使用它,那么你可以获得类型。为了实现第一步,请先获取似乎符合您需求的包。 - andrea06590
抱歉我一直按回车键,这里是完整答案:
  • 如果您在Angular CLI项目中,请将CSS和JS添加到.angular-cli文件中的应用程序中:[scripts:[heremap.js,... ]和styles:[heremaps.css,...]] 如果不是,请将它添加到您的主index.html文件中。
  • 如果可以获取类型,则使用TypeScript编写和阅读更容易:https://www.npmjs.com/package/@types/heremaps
  • 然后只需进入组件并“import * as HereMap from'heremaps'”,其中heremaps是您刚刚安装的index.d.ts中声明的名称(npm install --save @types/heremaps)。
- andrea06590
我已经让它工作了。你可以在下面看到我的代码。但我认为这不是一种优雅的方式。 如果我使用 "import * as HereMap from '@types/heremaps'" 而不是 "declare var H: any;" 就无法工作。你有任何想法吗? 如果我下载了这些脚本,我需要把它们放在哪里?它们应该放在资产文件夹中吗?谢谢你的帮助。 - jns_ai_unr
我本不想这么说,但我说过你可以同时使用“declare H from 'heremaps'”和“import * as H from 'heremaps'”; 如果你已经下载了它们,只需将其添加到script和style标签中的index.html中,它应该与angular-cli相同。 请参考:https://hackernoon.com/how-to-use-javascript-libraries-in-angular-2-apps-ff274ba601af 这个教程非常好,但只展示了如何使用angular-cli进行操作。 如果你还有问题,请告诉我 ;) - andrea06590

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接