2016-12-19 9 views
1

typescript/Angular2のプロジェクト構造の中で少し混乱しています。私はそれを拡張するためにベースコードとしてダウンロードしました。Angular2プロジェクトの構造を理解する

これは、プロバイダが初期化され、angular2で提供される方法に関連しています。 ENV_PROVIDERSAPP_PROVIDERSプロバイダの配列として提供:あなたは2つの項目があります見ることができるように

import { ENV_PROVIDERS } from './environment'; 
import { APP_RESOLVER_PROVIDERS } from './app.resolver'; 

// Application wide providers 
const APP_PROVIDERS = [ 
    ...APP_RESOLVER_PROVIDERS, 
    AppState, 
    AppConfig 
]; 
@NgModule({ 
    bootstrap: [ App ], 
    declarations: [ ... ], 
    imports: [ ... ], 
    providers: [ 
    ENV_PROVIDERS, 
    APP_PROVIDERS 
    ] 
}) 
export class AppModule { 

は現在、これはAppModuleコードです。

app.resolver.ts

import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; 
import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/observable/of'; 

@Injectable() 
export class DataResolver implements Resolve<any> { 
    constructor() { 

    } 
    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
    return Observable.of({ res: 'I am data'}); 
    } 
} 

// an array of services to resolve routes with data 
export const APP_RESOLVER_PROVIDERS = [ 
    DataResolver 
]; 

environtment.ts

// Angular 2 
// Environment Providers 
let PROVIDERS: any[] = [ 
    // common env directives 
]; 

if ('production' === ENV) { 
    PROVIDERS = [ 
    ...PROVIDERS, 
    // custom providers in production 
    ]; 

} else { 
    // Development 
    PROVIDERS = [ 
    ...PROVIDERS, 
    // custom providers in development 
    ]; 

} 

export const ENV_PROVIDERS = [ 
    ...PROVIDERS 
]; 

他方の手で、私は、RESTクライアントの実装であるライブラリを使用しています。このライブラリーはApiModuleクラスを持ち、forConfigメソッドを使用しています。私はそれを使用する方法を理解できません。

export interface ConfigurationParameters { 
    apiKey?: string; 
    username?: string; 
    password?: string; 
    accessToken?: string; 
    basePath?: string; 
} 

export class Configuration { 
    apiKey: string; 
    username: string; 
    password: string; 
    accessToken: string; 
    basePath: string; 


    constructor(configurationParameters: ConfigurationParameters = {}) { 
     this.apiKey = configurationParameters.apiKey; 
     this.username = configurationParameters.username; 
     this.password = configurationParameters.password; 
     this.accessToken = configurationParameters.accessToken; 
     this.basePath = configurationParameters.basePath; 
    } 
} 

私は私のカスタムプロバイダーを追加することができるよ、どのようにこのような構成によれば知りたいのです:それはngModuleprovidersを設定するオブジェクト... Configurationがある

@NgModule({ 
    imports:  [ CommonModule, HttpModule ], 
    declarations: [], 
    exports:  [], 
    providers: [ UsersService ] 
}) 
export class ApiModule { 
    public static forConfig(configuration: Configuration): ModuleWithProviders { 
     return { 
      ngModule: ApiModule, 
      providers: [ {provide: Configuration, useValue: configuration}] 
     } 
    } 
} 

を返していますたとえば、basePathプロパティを設定します。

このUserServiceの例:

@Injectable() 
export class UsersService { 
    protected basePath = 'http://localhost/commty/cmng'; 
    public defaultHeaders: Headers = new Headers(); 
    public configuration: Configuration = new Configuration(); 

    constructor(protected http: Http, @Optional()@Inject(BASE_PATH) basePath: string, @Optional() configuration: Configuration) { 

私はとてもよく説明してきました願っています。

答えて

0

petstoreにtypescript-angular2クライアントを使用しています。私は自分で笑いを愛し、幸せな人たちがそれを使用しています!あなたは単にAppModuleでこの

を行うことができますforConfigにその構成を使用せずにbasePathを設定したい場合はとにかくあなたの質問に答えるために

... 
@NgModule({ 
    bootstrap: [ App ], 
    declarations: [ ... ], 
    imports: [ ... ], 
    providers: [ 
    ENV_PROVIDERS, 
    APP_PROVIDERS, 
    {provide: BASE_PATH, useValue: 'http:your.url.awesome'} 
    ] 
}) 
export class AppModule { 

これはすべてのために注入された値を使用しますあなたが手でブートストラップしている場合は、これを使用することもできます:

BootstrapFileで

:あなたが設定オブジェクトを使用しての利点を活用したい場合は

bootstrap(AppComponent, [ 
     { provide: BASE_PATH, useValue: 'https://your-web-service.com' }, 
    ]); 

あなたはこれに変更したい:あなたは動的にアプリケーションを開始する前に、あなたの設定を決定したい場合

import { ApiModule, Configuration } from "module-library-name"; 
... 
const myAppConfig = new Configuration({ 
... 
basePath: 'https://your-web-service.com' 
}); 
@NgModule({ 
    bootstrap: [ App ], 
    declarations: [ 
    ApiModule.forConfig(myAppConfig); 
    ], 
    imports: [ ... ], 
    providers: [ ... ] 
}) 
export class AppModule { 

とこの答えがまだ必要な場合、私は追加することができますAPP_INITIALIZERのためのプロバイダを使用して、アプリケーションモジュールに沿ってそれをお勧めします。

関連する問題