I'm writing an angular 2.1.0 project with typescript 2.0.3.
I created an app-config
service with the following code:
import { Injectable } from '@angular/core';
@Injectable()
export class AppConfigService {
public config: any = {
auth0ApiKey: '<API_KEY>',
auth0Domain: '<DOMAIN>',
auth0CallbackUrl: '<CALLBACK_URL>',
appBaseHref: '/'
}
constructor() {}
/* Allows you to update any of the values dynamically */
set(k: string, v: any): void {
this.config[k] = v;
}
/* Returns the entire config object or just one value if key is provided */
get(k: string): any {
return k ? this.config[k] : this.config;
}
}
now I want to use that injectable service on my app-module.ts
in order to set the APP_BASE_HREF
provider.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { AppComponent } from './app/app.component';
import { HelpComponent } from './help/help.component';
import { WelcomeComponent } from './welcome/welcome.component';
import {APP_BASE_HREF} from "@angular/common";
import { MaterialModule } from "@angular/material";
import { AUTH_PROVIDERS } from "angular2-jwt";
import { RouterModule } from "@angular/router";
import {AppConfigService} from "app-config.service";
const appConfigService = new AppConfigService();
@NgModule({
declarations: [
AppComponent,
HelpComponent,
WelcomeComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
MaterialModule.forRoot(),
RouterModule.forRoot([
{ path: "",redirectTo:"welcome",pathMatch:"full"},
{ path: "welcome", component: WelcomeComponent },
{ path: "help",component: HelpComponent},
{ path: "**",redirectTo:"welcome"}
])
],
providers: [AUTH_PROVIDERS,{provide: APP_BASE_HREF, useValue:appConfigService.get('appBaseHref')}],bootstrap: [AppComponent]
})
export class AppModule {
}
so here I initiate the class to a const and use it. is there a way to inject is in a cool and sexy way?
for example for my auth service I defined it in the constructor
constructor(@Inject(AppConfigService) appConfigService:AppConfigService)
is there a way to do a sexy thing here too? or just to leave it as is?
thanks
You could use a factory for the APP_BASE_REF
providers: [
AppConfigService,
{
provide: APP_BASE_HREF,
useFactory: (config: AppConfigService) => {
return config.get('appBaseHref')
},
deps: [ AppConfigService ]
}
]
Once you add the AppConfigService
to the providers, it makes it injectable to both the factory and the auth service. This is generally how it should be done anyway. Later if say the AppConfigService
needs some dependencies maybe, it will be handled through the injection system.
See Also:
@Inject
.If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With