我的app.module.ts

providers: [
            HttpClient,
            {
                provide: APP_INITIALIZER,
                useFactory: (appConfigSvc:AppConfigService) => () => {
                    appConfigSvc.load();
                },
                deps: [AppConfigService],
                multi: true
            }, AppConfigService

appConfig.Service.ts

@Injectable()
export class AppConfigService {
    private serviceApiUrl = "api/AppConfigApi/";
    public applicationConfig: Appconfigmodel.IAppConfigModel;


    constructor(private _http: Http) {     
    }

    getApiConfig(): Appconfigmodel.IAppConfigModel {

        return this.applicationConfig;
    }

    load() { this.getApplicationConfig(); }



    getApplicationConfig(): Observable<Appconfigmodel.IAppConfigModel> {

        let headers = new Headers({ 'Content-Type': 'application/json' });

        let options = new RequestOptions({
            headers: headers
        });

                //pulling config data from web.config of a ASP.Net Web API2

        return this._http.get(this.serviceApiUrl + 'GetApplicationConfig', options)
            .map((response: Response) => <Appconfigmodel.IAppConfigModel>response.json())
            .do(data => console.log('All: ' + JSON.stringify(data)))
            .catch(this.handleError);
    }

然后在任何组件中使用它：

export class FirstComponent {

constructor(private _appConfigService: AppConfigService) {

    }

    ngOnInit() {
      this.applicationConfig= this._appConfigService.getApiConfig();      // The config dat is getting as  undefined
    }

//button click
clickButton()
{
this.applicationConfig= this._appConfigService.getApiConfig();  // The  config data is populated here
}

}

问题是，我无法访问任何组件的ngOninit中的配置数据。但它可以在按钮单击事件处理程序或类似方法中访问，这些方法通常在应用程序启动后调用一段时间。

感谢任何帮助。感谢。

Answer 1

构造函数（private _appConfigService：AppConfigService）{ 这里的构造函数变量应该是public来访问它。

如果您根据我的经验使用angular2，最好使用ng工具。 Angular-cli

npm install angular-cli -g 阅读这些工具的自述文件。我不会用微软垃圾建立我的前端，尽管我已经软了20多年了。

Answer 2

如果在调用ngOnInit()但是适用于点击事件时它无效，请尝试使用ngAfterViewInit()。我认为应该有效。 https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html

Angular2-在应用启动时加载配置数据

我的app.module.ts

appConfig.Service.ts

然后在任何组件中使用它：

2 个答案: