APP_INITIALIZER 加载服务调用 Angular 13 [重复]答案

【问题标题】：APP_INITIALIZER load service call Angular 13 [duplicate]APP_INITIALIZER 加载服务调用 Angular 13 [重复]
【发布时间】：2022-01-15 04:33:17
【问题描述】：

我正在使用 Angular 13 并尝试使用 APP_INITIALIZER 令牌连接到 Angular 的引导阶段。需要创建 Angular 服务来处理我们的远程配置的获取，但问题是不再支持 topromise，它已弃用，如何由于 APP_INITIALIZER 只支持承诺，我是否要重新编写这个 loadAppConfig() 方法。非常感谢任何帮助。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class AppConfigService {
  private appConfig;

  constructor(private http: HttpClient) { }

  loadAppConfig() {
    return this.http.get('/assets/data/appConfig.json')
      .toPromise()
      .then(data => {
        this.appConfig = data;
      });
  }

  getConfig() {
    return this.appConfig;
  }
}

【问题讨论】：

是的，谢谢，这就是我的函数现在的样子 loadConfig(){ return this.http.get("/assets/data/appConfig.json").pipe(tap(值 => this.config = 值））； }

标签： angular typescript

【解决方案1】：

APP_INITIALIZER 处理 Promise 和 observables，来自文档：https://angular.io/api/core/APP_INITIALIZER

“如果这些函数中的任何一个返回 Promise 或 Observable”

他们的第二个例子展示了一个 observable：

function initializeAppFactory(httpClient: HttpClient): () => Observable<any> {
 return () => httpClient.get("https://someUrl.com/api/user")
   .pipe(
      tap(user => { ... })
   );
}

@NgModule({
  imports: [BrowserModule, HttpClientModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [{
    provide: APP_INITIALIZER,
    useFactory: initializeAppFactory,
    deps: [HttpClient],
    multi: true
  }]
})
export class AppModule {}

【讨论】：

这行得通，感谢指导 loadConfig(){ return this.http.get("/assets/data/appConfig.json").pipe(tap(value => this.config =价值））； }