Come scrivere la classe Helper in dattiloscritto?

Question

Ho un problema quando uso typeScript con angular2.
Voglio creare un file helper.ts esporta molte classi/funzioni comuni da riutilizzare.
Ma il Helper class ha bisogno di importare altri servizi nel costruttore, in modo che quando un'altra classe importa Helper class, deve impostare param è quei servizi. Non voglio questo.

Come posso scrivere Helper class, che posso usare dovunque quando import {Helper} from ..

Questo è il mio campione: Helper.ts

import {TranslateService, TranslatePipe} from 'ng2-translate/ng2-translate'; 
import {Inject, Component} from 'angular2/core'; 


@Component({ 
    providers: [TranslateService] 
}) 

export class Helpper { 
    public trans; 
    public lang; 
    public properties; 

    constructor(trans: TranslateService) { 
     this.trans = trans; 
     //This is variable for translate function 
     this.lang = this.trans.currentLang; 
     this.properties = this.trans.translations[this.lang];    
    } 

    translate(key) { 
     return this.properties[key];  
    }  
} 

RenderTab.ts

import {Component, Inject, Injectable} from 'angular2/core'; 
import {Helper} from './helpper' 

@Component({ 
    providers: [Helper] 
}) 

export class RenderTab { 
    public helper; 

    constructor(helper: Helper) { 
     this.helper = helper; 
    } 

    render() { 
     var test = this.helper.translate('string'); 
    } 
} 

HomePage.ts

import {Component, Inject, Injectable} from 'angular2/core'; 
import {RenderTab} from './RenderTab' 

@Component({ 
    selector: 'div', 
    templateUrl: './HomePage.html', 
    providers: [RenderTab] 
}) 

export class ColorPicker { 
    public renderTab; 

    constructor(renderTab: RenderTab) { 
     this.renderTab = renderTab; 

     var test = this.renderTab.render(); 
    } 
} 

Per favore aiutatemi, grazie.

Answer 1

Prima di tutto class Helper dovrebbe essere un servizio, che dovrebbe essere iniettabile.

import {Injectable} from "@angular/core"; 
import {Http} from "@angular/http"; 
import {TranslateService} from "ng2-translate"; 

@Injectable() 
export class Helper { 
    constructor(private http: Http, private translateService: TranslateService) { 

    } 

} 

Ora si può semplicemente iniettare questo helper e usarlo in qualsiasi componente che ti piace.

import {Helper} from "./helper.ts"; 
@Component({ 
    ... 
}) 
export class MyComponent{ 
    constructor(public helper: Helper) {} 
} 

Aggiornamento: È necessario aggiungere il servizio a fornitori di serie del modulo principale per farlo funzionare

Answer 2

La classe Helper corrisponde a un servizio e dal momento che si vuole iniettare un altro servizio in è necessario aggiungere il decoratore @Injectable (non @Component uno):

Import {Injectable} from 'angular2/core'; 

@Injectable() 
export class Helper { 
    (...) 
} 

dal momento che è parte di iniezione di dipendenza, tutti i parametri del suo costruttore saranno forniti da Angular2 stessa. Non è necessario fornirli da soli e creare istanze di questa classe per essere in grado di farlo. È sufficiente iniettare in cui si desidera utilizzarlo ...

È necessario quindi al corrispondente fornitore a quando bootstrap l'applicazione:

bootstrap(AppComponent, [ Helper ]); 

O a livello di componente, ma può essere utilizzato solo all'interno di trasformazione innescato da il componente.

@Component({ 
    (...) 
    providers: [ Helper ] 
}) 
export class SomeComponent { 
    (...) 
} 

Per maggiori dettagli su iniezione di dipendenza e gli iniettori gerarchiche, si potrebbe avere uno sguardo a questa domanda:

• No provider for ObservableDataService

Answer 3

classi di supporto dovrebbero contenere solo funzioni statiche o variabili, se non sono diversi dai servizi.Per favore correggimi se sbaglio.

Uno dei modi per creare classe Helper senza Injectable o aggiungendolo a providers è pubblicato qui Thanks to k7sleeper

Copia il codice dalla post citato per una rapida consultazione.

utils.ts:

export default class Utils { 
    static doSomething(val: string) { return val; } 
    static doSomethingElse(val: string) { return val; } 
} 

Usage:

import Utils from './utils' 
export class MyClass { 
    constructor() 
    { 
     Utils.doSomething("test"); 
    } 
} 

Ma leggendo più su questo, ha senso loro iniettare attraverso Injectable e providers, ma avrei ancora tutti i metodi come static e la classe senza constructor