一度グローバルプロバイダを設定可能

Question

環境設定値を与えることができる設定サービスを作ろうとしていて、それを使って適切な設定値を返すのです。

app.module.ts

providers: [ 
    ConfigService.SetEnv("DEV"), 
    .... 
] 

そして上記の例では、スロー ConfigService.Get().api

成分中に注入された後、次のように使用されるこの続くこの

import { Injectable } from '@angular/core'; 

@Injectable() 
export class ConfigService { 
private env: string;  

SetEnv(value: string) { 
    this.env = value; 
} 

Get() { 
    let rtrn; 

    if (this.env == "DEV") { 
     rtrn = { 
      api: "http://localhost:60517/api/" 
     } 
    } 
    else if (this.env == "TEST") { 
     rtrn = { 
      api: "http://test:60517/api/" 
     } 
    } 
    else { } 

    return (rtrn); 
} 
} 

ような何かをエラー：app.module.ts:64 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_12__services_config_config_service__.a.SetEnv is not a function

これらの行に何か...これを達成するための他の提案を歓迎します。

Answer 1

私は私のアプリを構築したときにこれを行う方法を知りませんでしたが、私は今日始めていた場合は、ここで私はあなたの問題を解決する方法を次のとおりです。

は、選択した設定をエクスポートし、設定ファイルを持って、共通のインターフェースと一緒に。

import { InjectionToken } from '@angular/core'; 
export interface IConfig { 
    api:string, 
    env?:string 
}; 
const DEV_CONFIG:IConfig = { 
    api:'http://dev.endpoint.com', 
    env:'DEV' 
}; 
const TEST_CONFIG:IConfig = { 
    api:'http://test.endpoint.com', 
    env:'TEST' 
}; 
export const CONFIG_TOKEN = new InjectionToken<IConfig>('config.token'); 
export const CONFIG_PROVIDER = { 
    provide:CONFIG_TOKEN, 
    useValue:TEST_CONFIG // <- choose the configuration here 
} 

があなたのモジュールのproviders配列にエクスポートプロバイダーを追加します：

export class AppComponent { 
    config:IConfig; 

    // Inject is imported from @angular/core 
    constructor(@Inject(CONFIG_TOKEN)config:IConfig){ 
    this.config = config; 
    } 
} 

：

providers: [CONFIG_PROVIDER] 

最後に、あなたのコンポーネントでは、あなたが設定をこのように注入のは、config.tsそれを呼ぶことにしましょう

これで、コンポーネントの設定にアクセスできるようになりました。

• See the docs
• Live demo

Answer 2

あなたはapp.moduleにプロバイダからメソッドを呼び出すことはできません。これは間違っています。

providers: [ 
ConfigService.SetEnv("DEV"), 
.... 
] 

envを設定する場合は、このサービスを注入するコンポーネントから設定します。上記の答えを見て、それはあなたにあなたが探している解決策を与える必要があります。

これが問題を解決する場合はお知らせください。