Как включить внешние js-библиотеки в AngularJs 2?

Question

Я пытаюсь включить внешнюю библиотеку js в мое приложение AngularJs 2 и попытаюсь сделать все методы в этом js-файле в качестве службы в приложении Angularjs 2.

Например: позволяет указать файл my js.

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

Так что я пытаюсь использовать этот JS файл и использовать все методы этого объекта и добавить его в сервис, так что моя служба имеет открытые методы, которые, в свою очередь, называет это Js методы. Я пытаюсь повторно использовать код, не переопределяя все методы в моем приложении на основе скриптов Angularjs 2. Я зависим от внешней библиотеки, которую я не могу изменить. Пожалуйста, помогите, спасибо заранее.

Answer 1

С ES6, вы можете экспортировать переменную:

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

и импортировать его, как это в другой модуль:

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

в предположении, что первый модуль расположен в файл hello-module.js и в той же папке, что и вторая. Нет необходимости иметь их в одной папке (вы можете сделать что-то вроде этого: import {hello} from '../folder/hello-module';). Важно то, что папка правильно обрабатывается SystemJS (например, с конфигурацией в блоке packages).

Answer 2

При использовании внешних библиотек, загружаемых в браузер извне (например, с помощью index.html), вам просто нужно сказать, что ваши сервисы/компонент, которые они определены, «объявляют», а затем просто используют его. Например, я недавно использовал socket.io в своем компоненте angular2:

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