如何在angular2全局导入Javascript库

Question

我正在尝试在angular2中导入moment.js库.我发现以下解决方案:

import {Component} from 'angular2/core';
import * as moment from 'moment';

@Component({
  selector: 'app',
  template: require('./app.component.html')
})
export class AppComponent {
  moment:any = moment;
  constructor() {}
}

但是,我不想将其导入到我拥有的每个组件中.有没有办法全局注入它,所以我可以在我的所有组件中使用它？

Answer 1

从导入时刻的公共基本类型派生组件.

亲

import * as moment from 'moment';

export class MomentAwareClass {
  moment:any = moment;
  constructor() {}
}

儿童

import {Component} from 'angular2/core';

@Component({
  selector: 'app',
  template: require('./app.component.html')
})
export class AppComponent extends MomentAwareClass  {
  constructor() {}
}

更新

更好的方法是使用依赖注入来使用Injectable()装饰器编写服务,这更好,因为组合比继承更受欢迎.

import { Injectable } from '@angular/core';
import * as moment from 'moment';

@Injectable()
export class SomeClass {
    public moment: any = moment;
}

Answer 2

从我在这里阅读的内容中，我可以像这样引导整个应用程序时提供momentjs库：

import * as moment from 'moment';
import {provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

bootstrap(App, [
    provide("moment", {useValue:moment})
])

然后，可以使用DI在自己的组件中使用它，如下所示：

import {Component, OnInit, Inject} from 'angular2/core';

@Component({
  selector: 'app',
  template: require('./app.component.html')
})
export class AppComponent {
  constructor(@Inject("moment") private moment) {}
}