angular - använda injicerbar tjänst för att ställa in konfigurationen av APP_BASE_HREF

Jag skriver ett Angular 2.1.0-projekt med TypeScript 2.0.3.

Jag skapade en app-config-tjänst med följande kod:

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

nu vill jag använda den injicerbara tjänsten i min app-module.ts för att ställa in APP_BASE_HREF-leverantören.

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 {
}

så här initierar jag klassen till en konstant och använder den. finns det ett sätt att injicera den på ett coolt och sexigt sätt?

till exempel för min autentiseringstjänst definierade jag den i konstruktorn

constructor(@Inject(AppConfigService) appConfigService:AppConfigService)

finns det ett sätt att göra något sexigt här också? eller bara låta det vara som det är?

tack

Svar #1

Du kan använda en fabrik för APP_BASE_REF

providers: [
  AppConfigService,
  {
    provide: APP_BASE_HREF,
    useFactory: (config: AppConfigService) => {
      return config.get('appBaseHref')
    },
    deps: [ AppConfigService ]
  }
]

När du lägger till AppConfigService i leverantörerna gör det det injicerbart både till fabriken och auth-tjänsten. Detta är i allmänhet hur det bör göras ändå. Senare, om till exempel AppConfigService behöver några beroenden, kommer det att hanteras genom injectionssystemet.

Se även:

  • Vad är skillnaden mellan @Inject och konstruktorsinjektion som vanlig parameter i Angular 2? om din användning av @Inject.

Relaterade artiklar