2016-10-15 10 views
6

私はtypescript 2.0.3で角度2.1.0プロジェクトを作成しています。注射可能なサービスを使用してAPP_BASE_HREFの設定を設定する

私は、次のコードでapp-configサービス作成:今、私はAPP_BASE_HREFプロバイダを設定するために私のapp-module.ts上の注射用サービスを利用したい

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

を。

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

ここで私はconstにクラスを開始し、それを使用します。クールでセクシーな方法で注射する方法はありますか?私は、コンストラクタ

constructor(@Inject(AppConfigService) appConfigService:AppConfigService) 

でそれを定義し、私の認証サービスのために例えば

はここにもセクシーなことを行う方法はありますか?それをそのままにしておきますか?

おかげ

答えて

2

あなたがプロバイダにAppConfigServiceを追加するとあなたはAPP_BASE_REF

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

のための工場を使用することができ、それは工場と認証サービスの両方に、それは、注射ます。とにかくこれは一般的にどのように行うべきかです。後でAppConfigServiceにいくつかの依存関係が必要な場合は、注入システムを通じて処理されます。

関連項目:

+0

1つの答えで2つの問題を解決しました。どうもありがとう! – ufk

関連する問題