无法从 Angular 中的配置服务获取属性

Question

我有一个配置服务，它使用HTTPget从json文件中获取数据。我想在其他服务和组件中使用这些属性。

config.json

{
"prod":"false",
"gql":{
"uri":"abc.com"
"cID":"123"
}
"token":"asdfg345"
}

appConfig.service.ts

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
@Injectable({
providedIn: "root"
})
export class ConfigService {
configData: any;
constructor(private httpClient: HttpClient) {}
async loadConfig() {
const data = await this.httpClient
.get<any>("./assets/config.json")
.toPromise();
this.configData = data;
console.log(this.configData);
return data;
}
getconfig() {
if (!this.configData) {
console.error("config could not be loaded from app config service.");
}
return this.configData;
}
}

为了在app.component.ts中显示json文件中的所有属性和prod属性，我尝试了一下，结果成功了：

constructor(private config:ConfigService){}
display(){
console.log(this.config.getconfig())
console.log(this.config.getconfig().prod)
}

但同样的做法在其他服务中不起作用。当我试图在另一个服务中控制台记录相同的事情时，我得到了2个错误的

无法从应用程序配置服务加载

• 配置
• 类型错误：无法读取未定义的属性

我应该如何读取服务中的这些属性？

Answer 1

我认为您需要一个APP_INITIALIZER，以便将ConfigService作为单例使用，并在整个应用程序中共享配置data。

1. 在root中注册ConfigService

@Injectable({
providedIn: 'root',
})
export class ConfigService {
...
}

2. 实现工厂方法。这样可以确保在应用程序启动时调用loadConfig方法

export function initializeAppFactory(configService: ConfigService) {
return async () => {
await configService.loadConfig();
};
}

3. 注册APP_INITIALIZER并在根模块中提供依赖项

@NgModule({
...,
providers: [
{
provide: APP_INITIALIZER,
useFactory: initializeAppFactory,
deps: [ConfigService],
multi: true,
},
]
})
export class AppModule {}

StackBlitz 演示