如何在Angular 2中包含外部JavaScript库？

我正在尝试在Angular 2应用程序中包含一个外部JS库，并尝试将该JS文件中的所有方法作为Angular 2应用程序中的服务

例如：假设我的JS文件包含

var hello = {
   helloworld : function(){
       console.log('helloworld');
   },
   gmorning : function(){
      console.log('good morning'); 
   }
}

所以我尝试使用这个JS文件，重用这个对象中的所有方法，并将其添加到一个服务中，这样我的服务就有了公共方法，而公共方法又反过来调用这个JS方法。我正在尝试重用代码，而无需重新实现基于typescript的Angular 2应用程序中的所有方法。我依赖于外部库，无法修改。

---

请帮助，提前谢谢。

使用ES6，您可以导出变量：

export var hello = {
  (...)
};

然后像这样将其导入另一个模块：

import {hello} from './hello-module';

---

假设第一个模块位于

hello module.js

文件中，并且与第二个模块位于同一文件夹中。不必将它们放在同一文件夹中（您可以这样做：

从“../folder/hello module”；

导入{hello}）。重要的是，SystemJS正确处理文件夹（例如，使用

程序包

块中的配置）。

当使用外部加载到浏览器中的外部LIB（例如，通过index.html）时，您只需说您的服务/组件是通过“declare”定义的，然后就可以使用它。例如，我最近在angular2组件中使用了socket.io：

import { Component, Input, Observable, AfterContentInit } from angular2/angular2';
import { Http } from 'angular2/http';

//needed to use socket.io! io is globally known by the browser!
declare var io:any;

@Component({
  selector: 'my-weather-cmp',
  template: `...`
})
export class WeatherComp implements AfterContentInit{
  //the socket.io connection
  public weather:any;
  //the temperature stream as Observable
  public temperature:Observable<number>;

    //@Input() isn't set yet
    constructor(public http: Http) {
      const BASE_URL = 'ws://'+location.hostname+':'+location.port;
      this.weather = io(BASE_URL+'/weather');
      //log any messages from the message event of socket.io
      this.weather.on('message', (data:any) =>{
        console.log(data);
      });
    }

    //@Input() is set now!
    ngAfterContentInit():void {
      //add Observable
      this.temperature = Observable.fromEvent(this.weather, this.city);
    }
}

从angular2/angular2'导入{组件，输入，可观察，AfterContentInit}；
从'angular2/Http'导入{Http}；
//需要使用socket.io！io是全球已知的浏览器！
声明变量io：任何；
@组成部分({
选择器：“我的天气”，
模板：``
})
导出类WeatherComp实现AfterContentInit{
//socket.io连接
公众天气：有；
//可以观察到的温度流
公众温度：可观测；
//@尚未设置Input（）
构造函数（公共http:http）{
const BASE_URL='ws://'+location.hostname+'：'+location.port；
this.weather=io（BASE_URL+'/weather'）；
//记录socket.io消息事件中的所有消息
this.weather.on（'message'，（数据：any）=>{
控制台日志（数据）；
});
}
//@Input（）现在已设置！
ngAfterContentInit（）：void{
//添加可观察的
this.temperature=从事件（this.weather，this.city）可观察到的温度；
}
}

您如何实现您的应用程序：es5或es6？哪一个是模块加载器（如果有的话）？ES6和我使用system.js作为模块加载器Hi thiery，如果我想在es5中做同样的事情呢？不使用导出..如果我依赖于外部库（无法修改），那会怎么样？否则您将文件包含在

脚本

标记中，但您的

hello

变量将是全局变量：-（.大多数外部库都支持commonjs或systemjs等模块管理器。请注意，您可以将符合commonjs的模块配置为systemjs。您希望使用哪些外部库？我觉得strophe.js支持amd for module loader（systemsjs支持）。您可以尝试使用此配置：

System.config（{map:{'strophe.js'：'node_modules/strophe.js/strophe.js'}}）

通过这种方式，您将能够以这种方式导入它：

import{strophe}from'strophe.js'；

对类似问题的评论给出了最好的答案：谢谢您的回答。我尝试了类似的方法，它也起了作用。但令人担忧的是socket.io是全球知名的：(