前言

想象一下，您的應(yīng)用需要一些動態(tài)配置信息，這些信息在應(yīng)用啟動之前需要動態(tài)獲取，并在應(yīng)用運(yùn)行中使用。

顯然不能直接寫道靜態(tài)配置文件中，但是從客戶端發(fā)出的請求又是一個(gè)異步請求，如何協(xié)調(diào)這個(gè)問題呢？

這里，我想向您演示，如何在 Angular 應(yīng)用初始化期間，使用 APP_INITIALIZER 注入器來獲取應(yīng)用的動態(tài)配置信息。

什么是 APP_INITIALIZER 注入器

APP_INITIALIZER 是允許您在 Angular 初始化七千處理您自己任務(wù)的機(jī)制。它既可以用于 AppModule，核心模塊，也可以用于您自己的應(yīng)用加載模塊中。典型的場景是應(yīng)用加載之前做的事情，比如從服務(wù)處加載用于設(shè)置應(yīng)用的配置信息。在示例中，我們使用它從服務(wù)器的 XML 配置文件中加載應(yīng)用的設(shè)置信息。

創(chuàng)建 AppLoad 模塊

盡管不是必要，通過創(chuàng)建 App Load module 還是對應(yīng)用加載有助于隔離。

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { HttpClientModule } from "@angular/common/http";
 
import { AppLoadService } from './app-load.service';
 
export function init_app(appLoadService: AppLoadService) {
 return () => appLoadService.initializeApp();
}
 
export function get_settings(appLoadService: AppLoadService) {
 return () => appLoadService.getSettings();
}
 
@NgModule({
 imports: [HttpClientModule],
 providers: [
 AppLoadService,
 { provide: APP_INITIALIZER, useFactory: init_app, deps: [AppLoadService], multi: true },
 { provide: APP_INITIALIZER, useFactory: get_settings, deps: [AppLoadService], multi: true }
 ]
})
export class AppLoadModule { }

注意一下幾點(diǎn)：

• APP_INITIALIZER 導(dǎo)入自 @angular/core
• 這里有多個(gè) APP_INITIALIZER，它們在應(yīng)用初始化過程中并發(fā)執(zhí)行，直到它們?nèi)客瓿伞?br /> 　　使用 nulti: true 用于多個(gè)注入器，如果只有一個(gè)，使用 multi: false。
• 工廠函數(shù) init_app 和 get_settings 應(yīng)當(dāng)返回一個(gè)返回 Promise 的函數(shù)。
• 該模塊必須添加到 AppModule 的導(dǎo)入數(shù)組中。

創(chuàng)建 App Load Service

AppLoadService 應(yīng)當(dāng)隔離您在應(yīng)用初始化期間的作為。當(dāng)然這不是必須的，您可以使用任何需要的服務(wù)。

這里實(shí)現(xiàn)了兩個(gè)方法我們在前面代碼中使用的方法。在我們的 AppLoadModule 中作為依賴注入到提供器數(shù)組中。

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/toPromise';
 
import { APP_SETTINGS } from '../settings';
 
@Injectable()
export class AppLoadService {
 
 constructor(private httpClient: HttpClient) { }
 
 initializeApp(): Promise<any> {
 return new Promise((resolve, reject) => {
   console.log(`initializeApp:: inside promise`);
 
   setTimeout(() => {
   console.log(`initializeApp:: inside setTimeout`);
   // doing something
 
   resolve();
   }, 3000);
  });
 }
 
 getSettings(): Promise<any> {
 console.log(`getSettings:: before http.get call`);
 
 const promise = this.httpClient.get('http://private-1ad25-initializeng.apiary-mock.com/settings')
  .toPromise()
  .then(settings => {
  console.log(`Settings from API: `, settings);
 
  APP_SETTINGS.connectionString = settings[0].value;
  APP_SETTINGS.defaultImageUrl = settings[1].value;
 
  console.log(`APP_SETTINGS: `, APP_SETTINGS);
 
  return settings;
  });
 
 return promise;
 }
}

注意以下幾點(diǎn)：

• initializeApp 用于等待 3 秒，并輸出日志來顯示兩個(gè)方法是并行執(zhí)行的。
• getSettings 調(diào)用一個(gè)模擬的我使用 APIARY 創(chuàng)建的 API 來或者設(shè)置。
  　　這里使用這些設(shè)置來設(shè)置 APP_SETTINGS 對象的
• 它們都返回 Promise
  

運(yùn)行應(yīng)用

運(yùn)行應(yīng)用，可以在 Console 中查看如下輸出

注意：

• 您可以看到兩個(gè)方法都被調(diào)用了。
• 設(shè)置首先返回
• initializeApp 最后完成，然后應(yīng)用啟動。

如何從 settings 中獲取 API 的地址？

有些人想：“如果沒有 settings 來知道 URL, 我如何調(diào)用 API 呢？”，這是一個(gè)問題，您可以通過一個(gè)相對 URL 來通過 HttpClient ，并假設(shè) API 在您的 Web 站點(diǎn)上。

參考資料

https://www.intertech.com/Blog/angular-4-tutorial-run-code-during-app-initialization/

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

最新評論