Question

我对AppModule项目结构感到有点困惑，我已将其作为基本代码下载以扩展它。

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

目前，这是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_PROVIDERS

正如您所看到的，有两个项目：APP_PROVIDERS和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 ];：

ApiModule

另一方面，我使用的是一个REST客户端实现库。这个库有一个forConfig类，其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}] } } } ...

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) {的一个例子：

{{1}}

我希望我能解释得那么好。

Answer 1

我看到你正在为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所做的

如果你手动引导，你也可以使用它：

在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的提供程序，如果仍需要此答案，我可以添加该提供程序。

了解Angular2项目结构

1 个答案: