javascript - 如何在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

根据我在此处阅读的内容，我可以在引导整个应用程序时提供 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) {}
}

Answer 2

从导入时刻的通用基本类型派生您的组件。

家长

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