Как написать класс помощника в typescript?

У меня проблема при использовании 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();
    }
}

Пожалуйста, помогите мне, спасибо.

Ответ 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) {}
}

Обновление: вам необходимо добавить службу в массив поставщиков корневого модуля, чтобы она работала

Ответ 2

Классы помощников должны содержать только статические функции или переменную, если они не отличаются от служб. Пожалуйста, исправьте меня, если я ошибаюсь.

Один из способов создания класса Helper без Injectable или добавления его в 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

Ответ 3

Класс Helper соответствует службе, и поскольку вы хотите добавить другую услугу, вам нужно добавить декоратор @Injectable (а не @Component):

Import {Injectable} from 'angular2/core';

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

Поскольку эта часть инъекции зависимостей, все параметры ее конструктора будут предоставлены самим Angular2. Вам не нужно предоставлять их самостоятельно и создавать себе этот класс, чтобы иметь возможность этого. Просто добавьте его туда, где вы хотите его использовать...

Затем вам необходимо обратиться к соответствующему провайдеру при загрузке приложения:

bootstrap(AppComponent, [ Helper ]);

Или на уровне компонента, но может использоваться только при обработке, инициируемой компонентом.

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

Для более подробной информации об инъекции зависимостей и иерархических инжекторах вы можете посмотреть на этот вопрос:

Нет провайдера для ObservableDataService