如何用打字稿写助手类? [英] How to write Helper class in typescript?

问题描述

将typeScript与angular2一起使用时出现问题.
我想创建一个helper.ts文件，导出许多常见的分类/函数以供重新使用.
但是Helper class需要在构造函数中导入其他服务，以便当另一个类导入Helper class时，必须将参数设置为那些服务.我不要这个

I have a problem when use typeScript with angular2.
I want create one helper.ts file exports many classed/functions common to re-use.
But Helper class need import others service in constructor, so that when another class import Helper class, It have to set param is those service. I don't want this.

我怎么写Helper class，以便在import {Helper} from ..

这是我的示例: Helper.ts

This is my sample: 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

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

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

请帮助我，谢谢.

推荐答案

首先class Helper应该是服务class HelperClass，该服务应该是可注入的.

First of all class Helper should be a service class HelperClass, which should be injectable.

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

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

   }

}

现在，您可以简单地注入此帮助程序并将其用于您喜欢的任何组件中.

Now you can simply inject this helper and use it in any component you like.

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

更新:您需要在根模块的提供者数组中添加该服务才能使其正常运行，或者对于angular6 +，可以按以下方式提供该服务

Update: You need to add the service in providers array of the root module for it to work, or for angular6+, the service can be provided as follows

@Injectable({
  providedIn: 'root'
})
export class HelperService {
   ...
}

这篇关于如何用打字稿写助手类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！