如何在Angular加载模块之前获取异步数据

Question

我正试图将一个变量注入Angular模块的forRoot({[...]})方法中。

我以异步方式获得了这个变量，所以我试图在引导Angular之前获得它。(来自cordova.js(

问题：

Angular似乎在引导之前导入了模块(并调用了"forRoot"方法(。

有办法做到这一点吗？

谢谢！

---

我尝试的一个例子：

应用程序模块.ts

import {NgModule} from '@angular/core';
import {AgmCoreModule} from '@agm/core';
@NgModule({
imports: [
AgmCoreModule.forRoot({
apiKey: window['device'].platform, // value is 'null' instead of 'browser' or something else
libraries: ['places']
})
],
// [...]
bootstrap: [AppComponent]
})
export class AppModule {
}

src/main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
document.addEventListener('deviceready', () => {
console.log(window['device'].platform); // log 'browser'
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
}, false);

/！\提示

我使用的库(@agm/core(需要一个字符串作为apiKey，而不是一个函数。。。

Answer 1

您可以使用APP_INITIALIZER来提供一个工厂，该工厂将在模块导入之后但在引导之前执行。因此，您可以将apiKey设置为任何值，并在工厂中覆盖它：创建一个函数来获取所需的数据，并将apiKey设定到LAZY_MAPS_API_CONFIG对象中。一旦解决了所有APP_INITIALIZERS，应用程序引导将继续。

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { AgmCoreModule, LAZY_MAPS_API_CONFIG, LazyMapsAPILoaderConfigLiteral } from '@agm/core';
import { AppComponent } from './app.component';
import { map } from 'rxjs/operators';
export function agmConfigFactory(http: HttpClient, config: LazyMapsAPILoaderConfigLiteral) {
return () => http.get<{mapsApiKey: string}>("url").pipe(
map(response => {
config.apiKey = response.mapsApiKey;
return response;
})
).toPromise();
}
@NgModule({
imports:      [ BrowserModule, HttpClientModule, AgmCoreModule.forRoot({ apiKey: "initialKey"}) ],
declarations: [ AppComponent ],
providers: [ {
provide: APP_INITIALIZER, 
useFactory: agmConfigFactory, 
deps: [HttpClient, LAZY_MAPS_API_CONFIG], 
multi: true} 
],
bootstrap:    [ AppComponent ]
})
export class AppModule { }

Answer 2

用于填充值，该值被调用async到forRoot((的导入中。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { FormsModule } from "@angular/forms";
import { AppComponent } from './app.component';
import { MqttModule, IMqttServiceOptions } from "ngx-mqtt";
import { HttpClient, HttpClientModule } from '@angular/common/http';
import { map } from 'rxjs/operators';
export const MQTT_SERVICE_OPTIONS: IMqttServiceOptions = {
url: ""
}
export function wssConfig(http: HttpClient) {
return () => http.get<{ data: string }>("url").pipe(
map(response => {
MQTT_SERVICE_OPTIONS.url = response.data;
return response;
})
).toPromise();
}
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpClientModule,
MqttModule.forRoot(MQTT_SERVICE_OPTIONS)
],
providers: [
{
provide: APP_INITIALIZER,
useFactory: wssConfig,
deps: [HttpClient],
multi: true
}
],
bootstrap: [AppComponent]
})
export class AppModule {
}