理解Angular2项目结构_Angular - Fatal编程技术网

理解Angular2项目结构

angular

理解Angular2项目结构,angular,Angular,我对一个typescript/Angular2项目结构感到有点困惑，我下载了它作为基础代码来扩展它它与如何在angular2上初始化和提供提供程序有关目前，这是AppModulecode: import { ENV_PROVIDERS } from './environment'; import { APP_RESOLVER_PROVIDERS } from './app.resolver'; // Application wide providers const APP_PROVIDER

我对一个

typescript/Angular2

项目结构感到有点困惑，我下载了它作为基础代码来扩展它

它与如何在angular2上初始化和提供提供程序有关

目前，这是

AppModule

code:

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 {

如您所见，有两项：

ENV_提供者

和

APP_提供者

作为提供者数组提供

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

// 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客户机实现。这个库有一个带有

forConfig

方法的

apimule

类，我不知道如何使用它。它返回一个对象设置

ngModule

和

providers

@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}]
        }
    }
}

其中

配置

为：

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

我想知道如何根据这个结构添加自定义提供程序，并设置例如

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

我希望我已经解释得很好。

我看到您正在为petstore使用typescript-angular2客户端。我自己也喜欢大摇大摆，很高兴人们都在使用它

无论如何，要回答您的问题，如果您想设置basePath而不必在forConfig中使用该配置，您可以简单地这样做

在AppModule中：

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

这将为所有使用@Inject关键字的模块使用注入值，而所有的swagger api都使用该关键字

如果手动引导，也可以使用此选项：

在引导文件中：

    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 {

如果您想在应用程序启动前动态确定您的配置，然后将其传送到应用程序模块中，您可以使用应用程序初始化器的提供者，如果仍然需要此答案，我可以添加该提供者。