如何在打字稿中編寫助手類？

我在使用typeScript和angular2時遇到問題。
我想創建一個helper.ts文件導出許多分類/常用功能重用。
但是Helper class需要在構造函數中導入別人服務，這樣當另一個類導入Helper class時，必須設置參數是那些服務。我不想要這個。如何在打字稿中編寫助手類？

我怎麼能寫Helper class，我可以在任何地方使用時import {Helper} from ..

這是我的示例： 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(); 
    } 
}

請幫助我，謝謝。

來源

2016-02-27 Sophia

首先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) {} 
}

更新：您需要在根模塊的供應商陣列添加服務，它的工作

來源

2016-02-27 07:09:58

Gaurav Mukherjee，謝謝 – Sophia

是否可以使助手類爲靜態，所以我們不需要添加助手作爲屬性，而可以做一些像Helper.whatever（）這樣的事情？ –

@DanHastings你可以使用這個函數，或者創建一個包含值和函數的對象。例如'const Helper = {whatever：（a）=> {a + 1}}' –

助手類對應於一個服務，因爲要注入另一種服務，你需要添加@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

來源

2016-02-27 07:42:07

Helper類應該只包含靜態函數或變量，如果不是，它們與服務沒有區別。請糾正我，如果我錯了。

的方式，而不Injectable創建輔助類的一個或將其添加到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的類

來源

2016-11-11 12:16:56 Abhijeet

如何在打字稿中編寫助手類？

回答

相關問題