如何在打字稿中编写 Helper 类？ [复制]

Question

我在使用 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');
    }
}

主页.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

Helper 类应该只包含静态函数或变量，否则它们与服务没有区别。 如果我弄错了，请纠正我。

在没有Injectable 或将其添加到providers 的情况下创建Helper 类的一种方法发布在这里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的类

Answer 2

首先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 3

您的 Helper 类对应于一个服务，由于您想在其中注入另一个服务，您需要添加 @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