Tengo un problema cuando uso typeScript con angular2 .
Quiero crear un archivo helper.ts exporta muchas clasificaciones/funciones comunes para reutilizar.
Pero Helper class necesita importar otros servicios en el constructor, de modo que cuando otra clase importe la Helper class , debe establecer el parámetro es ese servicio. no quiero esto
Cómo puedo escribir Helper class , que puedo usar en cualquier lugar cuando import {Helper} from ..
Esta es mi muestra: 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(); } }Por favor ayúdame, gracias.
Las clases de ayuda solo deben contener funciones estáticas o variables, si no, no son diferentes de los servicios. Por favor corrígeme si me equivoco.
Una de las formas de crear una clase auxiliar sin Injectable o agregarla a los providers se publica aquí Gracias a k7sleeper
Copiando el código de la publicación mencionada para una referencia rápida.
utils.ts :
export default class Utils { static doSomething(val: string) { return val; } static doSomethingElse(val: string) { return val; } }Uso:
import Utils from './utils' export class MyClass { constructor() { Utils.doSomething("test"); } } Pero al leer más sobre esto, tiene sentido inyectarlos a través de Injectable y providers , pero aún tendría todos los métodos como static y la clase sin constructor .
En primer lugar class Helper debe ser una class HelperClass , que debe ser inyectable.
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) { } }Ahora puede simplemente inyectar este ayudante y usarlo en cualquier componente que desee.
import {HelperService} from "./helper.service.ts"; @Component({ ... }) export class MyComponent{ constructor(public helperService: HelperService) {} }Actualización: debe agregar el servicio en la matriz de proveedores del módulo raíz para que funcione, o para angular6 +, el servicio se puede proporcionar de la siguiente manera
@Injectable({ providedIn: 'root' }) export class HelperService { ... }Su clase Helper corresponde a un servicio y, dado que desea inyectar otro servicio, necesita agregar el decorador @Injectable (no el @Component one):
Import {Injectable} from 'angular2/core'; @Injectable() export class Helper { (...) }Dado que es parte de la inyección de dependencia, todos los parámetros de su constructor serán proporcionados por el mismo Angular2. No necesita proporcionarlos por su cuenta y crear una instancia de esta clase para poder hacerlo. Simplemente inyéctalo donde quieras usarlo...
Luego, debe consultar al proveedor correspondiente al iniciar su aplicación:
bootstrap(AppComponent, [ Helper ]);O a nivel de componente, pero solo se puede usar dentro del procesamiento desencadenado por el componente.
@Component({ (...) providers: [ Helper ] }) export class SomeComponent { (...) }Para obtener más detalles sobre la inyección de dependencia y los inyectores jerárquicos, puede consultar esta pregunta: