Question

在我的Angular2应用程序中，我尝试使用HTTP在bootstrap上从后端加载配置，以便我可以使用提取的数据创建角度服务。

每当我尝试读取我的Config中保存的HTTP响应时，我总是得到 TypeError：无法读取属性＆＃39; url＆＃39;未定义的错误。

似乎HTTP请求仅在整个引导程序方法完成时完成，而我的代码尝试在检索之前提取Observable响应。

如何修复它以从服务器提取配置并使用它在启动时创建角度服务？（我想用提取的数据在提供者中创建服务）

如果在启动时有更好的方法从服务器中提取配置，请发表评论。

我的 main.ts 如下所示：

bootstrap(AppComponent, 
    [APP_ROUTER_PROVIDERS, HTTP_PROVIDERS, ConfigurationService, Config])
    .catch(err => console.error(err)
);

configuration.service.ts

@Injectable()
export class ConfigurationService {

    constructor(private http: Http) {
    }

    load() {
        return this.http.get('config/getConfig').map(response => response.json());
    }

}

config.ts

@Injectable()
export class Config {

    public config;

    constructor(public configurationService: ConfigurationService) {
        configurationService.load().subscribe(
            config => this.config = config,
            error => console.error('Error: ' + error)
        );
    }

    get(key: any) {
        return this.config[key];
    }
}

app.component.ts

@Component({
    selector: 'app',
    templateUrl: 'app/app.component.html',
    styleUrls: ['app/app.component.css'],
    directives: [ROUTER_DIRECTIVES],
    providers: [MyService]
})
export class AppComponent {

    constructor(public myService: MyService) {
    }

}

my.service.ts

@Injectable()
export class MyService{

    private url;

    constructor(public config: Config) {
        this.url = config.get('url');
    }
}

Answer 1

您可以利用APP_INITIALIZER服务在应用程序启动之前重新加载配置：

bootstrap(AppComponent, [
  {
     provide: APP_INITIALIZER,
     useFactory: (config:Config) => {
       return config.load();
     },
     dependency: [ Config ]
   }
]);

为此，您需要调整一下ConfigService类：

@Injectable()
export class ConfigService {
  constructor(private http:Http) {}

  load() { // <------
    return new Promise((resolve) => {
      this.http.get(...).map(res=>res.json())
        .subscribe(config => {
          this.config = config;
          resolve();
        });
  }
}

然后，您就可以直接访问应用程序中配置对象的属性。

Answer 2

使用AoT编译时会抛出错误，因为工厂是匿名函数。您需要做的是导出工厂的功能

export function ConfigLoader(configService: ConfigService) {
    return () => configService.load();
}

并且应用程序的配置如下所示：

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        HttpModule,
        BrowserModule
    ],
    providers: [
        ConfigService,
        {
            provide: APP_INITIALIZER,
            useFactory: ConfigLoader,
            deps: [ConfigService]
        }],
    bootstrap: [ AppComponent ]
})
export class AppModule {
}

参考https://github.com/angular/angular/issues/10789

Answer 3

这是编写加载函数的更好方法

public load() {
    let promise =this.http.get(url).map(res => res.json()).toPromise();
    promise.then(config =>  this.validation = config);
    return promise;
};

启动时后端的Angular2加载配置

3 个答案: