Question

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

我如何撰写Helper class，我可以在import {Helper} from ..

的任何地方使用

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];      
    }      
}

这是我的样本： Helper.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');
    }
}

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

HomePage.ts

CMake Error at CMake/FindOptiX.cmake:75 (message):
  optix library not found.  Please locate before proceeding.
Call Stack (most recent call first):
  CMake/FindOptiX.cmake:84 (OptiX_report_error)
  CMakeLists.txt:189 (find_package)

请帮帮我，谢谢。

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的助手类或将其添加到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

的班级

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

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

3 个答案: