- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 Angular (v6) SPA,其中包含许多延迟加载的模块。目前我有一个包含应用程序配置的 json 文件,可以通过单独的管理界面进行更改,而无需重建/部署应用程序。配置文件当前加载在 APP_INITIALIZER 中,它可以很好地确保我在允许应用程序完全引导之前检索配置。
我想将此配置文件拆分为每个模块,在 APP_INITIALIZER 中加载一个通用配置,并且仅在该特定模块延迟加载时才加载其他配置。
是否有公认的或最佳实践方法来做到这一点?我似乎在 Angular 文档或网上一般都找不到任何东西。一种方法可能是在模块构造函数中获取配置,但据我所知,我无法阻止模块继续加载和设置其所有组件等,直到检索到此配置文件并将其存储在某处.
如果我将它设置在延迟加载模块的根路由上,路由解析器可能会达到这个目的吗?例如。我可以将一些“ConfigService”注入(inject)解析器,而不是返回任何数据,它将检索适当的配置文件并存储它,然后让解析器解析。
然后这个模块中的组件可以注入(inject)相同的 ConfigService,访问检索到的任何配置点。
最佳答案
在模块初始化期间获取配置(在构造函数中或在诸如 forRoot
之类的静态方法中)将不起作用,因为此时尚未解决依赖关系。因此,例如,您不会有 HttpClient
可用于获取数据。
什么可能是可行的方法:
1. 提供ConfigurationService
获取注入(inject)的配置文件的 URL
@Injectable()
export class ConfigService {
private config$ = new BehaviorSubject<any | null>(null);
private loadedConfig = false;
constructor(@Inject(CONFIG_URL) private configUrl: string,
private httpClient: HttpClient) {
this.getConfig();
}
getConfig(): Observable<any> {
if (!this.loadedConfig) {
this.loadedConfig = true;
this.httpClient.get(this.configUrl).subscribe(this.config$);
}
return this.config$;
}
}
ConfigurationService
作为可以动态设置CONFIG_URL
的模块的一部分:
@NgModule({
providers: [ConfigService],
imports: [
HttpClientModule
]
})
export class ConfigModule {
static buildForConfigUrl(configUrl: string): ModuleWithProviders {
return {
ngModule: ConfigModule,
providers: [
{
provide: CONFIG_URL,
useValue: configUrl
}
]
};
}
}
ConfigModule
在您的功能模块中
ConfigModule
使用
buildForConfigUrl
:
@NgModule({
exports: [
MyComponent
],
declarations: [
MyComponent
],
imports: [
ConfigModule.buildForConfigUrl('https://my-url/my-config.json')
]
})
export class FeatureModule {
}
ConfigService
在您的组件中:
@Component({
selector: 'my-component',
template: 'I am your new component. My config is: {{ config$ | async | json }}'
})
export class MyComponent implements OnInit{
config$: Observable<any>;
constructor(private configService: ConfigService) {
}
ngOnInit(): void {
this.config$ = this.configService.getConfig();
}
}
AppModule
。集中。
关于angular - 如何在 Angular 中为延迟加载的模块加载远程配置文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61226253/
我是一名优秀的程序员,十分优秀!