typescriptでHelperクラスを書くには？

Question

typeScriptとangular2を使用すると問題が発生します。
helper.tsファイルを1つ作成したいのは、再利用に共通の多くのクラス/関数をエクスポートすることです。
しかし、Helper classコンストラクタで他のimportサービスを必要とするので、別のクラスimport Helper classをインポートするときに、それらのサービスをparamに設定する必要があります。私はこれを望んでいない。 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 {Helper} from ..

は、これは私のサンプルであるとき、私はどこでも使用することができ、Helper classを書くことができますどのように

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

私のおかげで助けてください。

Answer 1

まず第一にclass Helperは、注射可能なサービスでなければなりません。

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

    } 

} 

これで、このヘルパーを注入して、好きなコンポーネントで使用できます。

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

更新：あなたはそれが

Answer 2

あなたのヘルパークラスにはサービスに対応して動作するため、ルートモジュールのプロバイダの配列にサービスを追加する必要があり、あなたがあなたの中に別のサービスを注入したいので、追加必要@Injectableデコレータ（@Componentないもの）：これは、依存性注入の一部なので

Import {Injectable} from 'angular2/core'; 

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

、コンストラクタのすべてのパラメータはAngular2自体によって提供されるであろう。あなた自身でそれらを提供する必要はなく、このクラスをインスタンス化してその機能を利用できるようにする必要があります。あなたはそれを使用する場所だけであなたは、あなたのアプリケーションをブートストラップするときに対応するプロバイダに、その後必要があります...

それを注入：

bootstrap(AppComponent, [ Helper ]); 

またはコンポーネントレベルでしかによってトリガ処理内で使用することができますコンポーネント依存性注入と階層インジェクタの詳細については

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

、あなたはこの質問を見ている可能性があり：

• No provider for ObservableDataService

Answer 3

ヘルパークラスは静的関数や変数をのみ含まれている必要があり、そうでなければ、彼らはサービスと違いはありません。私が間違っている場合は私を訂正してください。

Injectableせずにヘルパークラスを作成する方法の1つまたはprovidersに追加することが簡単に参照のために言及した記事からコードをコピーし、ここでThanks to k7sleeper

を掲載しています。

utils.ts：

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

使用法：

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

しかし、これについての詳細を読んで、それはInjectableとprovidersを介してそれらを注入に理にかなって、私はまだ持っているでしょうすべてのメソッドはstaticとクラスなしconstructor