我想导入angular2中的moment.js库。我发现了以下解决方案：如何在angular2全局导入Javascript库

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() {} 
}

不过，我不希望导入这对每一个组件我有。有没有一种方法可以将其注入到全局中，以便我可以在所有组件中使用它？

来源

2016-04-25 kdu

从导入时刻的公共基础类型导出组件。

家长

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

来源

2016-04-26 03:25:54 KnowHoper

谢谢！这是一个很好的方法。我想等一下，看看有没有其他的选择。 – kdu

您不能注入某些未标记为@injectable的东西。它只是不可能与这样的第三方库，除非你把它包装在一个角度理解服务。这可能是比我上面描述的更好的解决方案，因为它的可写性更高。 – KnowHoper

从我读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) {} 
}

来源

2016-04-26 21:59:49 kdu

如何在angular2全局导入Javascript库

回答

更新

相关问题