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

Question

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

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

问题：

似乎 Angular 在引导之前导入模块（并调用“forRoot”方法）。

有没有办法实现这一目标？

谢谢 ！

---

我尝试过的一个例子：

app.module.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提供一个工厂，该工厂将在模块导入之后但在 Bootstrap 之前执行。因此，您可以将 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 { }