So importieren Sie Javascript-Bibliothek in angular2 global

Question

Ich versuche, die Moment.js-Bibliothek in Angular2 zu importieren. Ich fand die folgende Lösung:

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

Aber ich will das nicht Ich muss jede Komponente importieren. Gibt es eine Möglichkeit, es global zu injizieren, damit ich es in allen meinen Komponenten verwenden kann?

Answer 1

Leiten Sie Ihre Komponenten von einem gemeinsamen Basistyp ab, der den Moment importiert.

Eltern

import * as moment from 'moment'; 

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

Kinder

import {Component} from 'angular2/core'; 

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

aktualisieren

Ein anderer Weg ist Dependency Injection zu verwenden, um einen Dienst mit dem Injectable() Dekorateur zu schreiben, dies wird Ihre Klasse Last schneller machen.

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

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

Answer 2

Von dem, was ich gelesen here, kann ich die momentjs Bibliothek bereitstellen, wenn Bootstrap die gesamte Anwendung wie folgt aus:

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

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

Dann kann ich es in meiner eigenen Komponente verwenden, indem DI verwendet wird, wie folgt aus:

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

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