更新

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

从我读到的here开始，我可以在引导整个应用程序时提供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) {}
}

如何在angular2全局导入Javascript库

2 个答案:

更新