如何在打字稿中写助手类？

Question

当使用我有一个问题typeScript用angular2.
我想创建一个helper.ts文件导出许多常用的分类/函数重用.
但是Helper class需要在构造函数中导入其他服务,这样当另一个类导入时Helper class,它必须设置param才是那些服务.我不想要这个.

我怎么写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();
    }
}

请帮帮我,谢谢.

Answer 1

首先class Helper应该是一个class HelperClass应该注射的服务.

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

   }

}

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

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

更新:您需要在根模块的providers数组中添加服务才能使其工作,或者对于angular6 +,可以按如下方式提供服务

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

Answer 2

辅助类只应包含静态函数或变量,否则它们与服务没有区别. 如果我错了,请纠正我.

在没有Injectable或添加Helper类的方法之一providers发布在这里感谢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

Answer 3

你的Helper类对应一个服务,因为你想要注入另一个服务,你需要添加@Injectable装饰器(而不是@Component一个):

Import {Injectable} from 'angular2/core';

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

由于它是依赖注入的一部分,因此Angular2本身将提供其构造函数的所有参数.您不需要自己提供它们并自己实例化这个类就可以了.只需将其注入您想要使用的地方......

在引导应用程序时,您需要到相应的提供者:

bootstrap(AppComponent, [ Helper ]);

或者在组件级别,但只能在组件触发的处理中使用.

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

有关依赖注入和分层注入器的更多详细信息,您可以查看以下问题:

• 没有ObservableDataService的提供者