如何全局導入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() {}
}

更新資料

更好的方法是使用Dependency Injection通過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) {}
}