Момент инъекции в angular2

Question

Я хотел бы сделать момент, чтобы его можно было вводить через мое приложение.
Я только начал изучать ng2 и не мог найти этот тип использования в документах.
Вот что у меня в app.module.ts:

import {BrowserModule} from '@angular/platform-browser'; 
import {NgModule} from '@angular/core'; 
import {FormsModule} from '@angular/forms'; 
import {HttpModule} from '@angular/http'; 
import {AppComponent} from './app.component'; 
import * as moment from 'moment'; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule 
    ], 
    providers: [{provide: 'moment', useValue: moment}], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
} 

и вот компонент:

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.sass'] 
}) 


export class AppComponent { 
    title = 'app works!'; 

    constructor(private moment) { 
    this.title += this.moment; 
    } 
} 

есть эта ошибка:

Uncaught Error: Can't resolve all parameters for AppComponent: 

Как это должно быть сделано правильно?

ОБНОВЛЕНО МОДУЛЬ

const moment = new OpaqueToken('moment'); 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule 
    ], 
    providers: [{provide: moment, useValue: moment}], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { 
} 

ОБНОВЛЕНО КОМПОНЕНТ

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

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.sass'] 
}) 


export class AppComponent { 
    title = 'app works!'; 

    constructor(private moment: moment) { 
    this.title += this.moment() 
    } 
} 

Существует ошибка в этой строке constructor(private moment: moment), который говорит, что: Cannot find name 'moment'.

Answer 1

Момент сам по себе не является инъекционным для Angular2. Однако он может быть обернут внутри одного.

Plunker Demo

moment.service.ts

import { Injectable } from '@angular/core'; 
import * as m from 'moment'; 
@Injectable() 
export class MomentService { 
    moment = m; 
} 

app.module.ts

import { MomentService } from './moment.service'; 

@NgModule({ 
    providers: [MomentService] 
    ... 

app.component.ts

import { MomentService } from './moment.service'; 

export class AppComponent { 
    constructor(private ms: MomentService){ 
     console.log('Moment:' + this.ms.moment("20111031", "YYYYMMDD").toString()); 
    } 
} 

Не идеально, но работает.

Answer 2

Вы должны использовать OpaqueToken, который будет позволил вам создать токен на основе строки. Я просто предлагаю вам изменить имя moment, чтобы избежать столкновения thr с переменной moment.

// You can place this is some file, so that you can export it. 
export const Moment = new OpaqueToken('moment'); 

, а затем вы можете использовать

providers: [{provide: MomentStatic, useClass: moment}], 

Вы можете пройти через this article для более подробной информации

При использовании зависимости включить его в компонент конструктора.

constructor(private moment: MomentStatic) 

Answer 3

Момент не нужно вводить, это библиотека, которую вы можете «просто использовать». Достаточно импортировать его в свой файл машинописного текста, теперь вы можете использовать функции момента.

Answer 4

Если вы загружаете момент.js, поэтому он доступен во всем мире, как обернуть его службой, которую вы затем можете ввести во все приложение?

import {Moment} from '../../node_modules/moment'; 

import { Injectable } from '@angular/core'; 

declare var moment: any; 

@Injectable() 
export class MomentService { 
    constructor() { } 

    get(): Moment { 
     return moment; 
    } 
} 

Я так вы получите TS IntelliSense, когда вы кодирования (по крайней мере, я в VSCode), и вы можете обрабатывать насмехаясь момент для легкого тестирования тоже.

Answer 5

Лучшее решение, которое я пришел, чтобы найти, чтобы создать службу обертки, но и раскрыть некоторые из наиболее распространенных методов непосредственно на самой службе с использованием геттеров:

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

/** 
* A wrapper for the moment library 
*/ 
@Injectable() 
export class MomentService { 
    /** 
    * Creates and returns a new moment object with the current date/time 
    */ 
    public moment() { return moment(); } 

    // expose moment properties directly on the service 
    public get utc() { return moment.utc; } 
    public get version() { return moment.version; } 
    public get unix() { return moment.unix; } 
    public get isMoment() { return moment.isMoment; } 
    public get isDate() { return moment.isDate; } 
    public get isDuration() { return moment.isDuration; } 
    public get now() { return moment.now; } 
} 

Answer 6

Не уверен, если это помогает в настоящее время но вам нужно что-то подобное (не проверено) на следующее, чтобы оно работало на вашем сервисе.

import { Inject } from '@angular/core'; 

constructor(@Inject(moment) private moment) { 
    this.title += this.moment() 
    } 

Ключевой бит является @Inject