Angular如何在應用初始化時運行代碼詳解

發(fā)布時間：2020-09-08 01:46:02 來源：腳本之家閱讀：188 作者：冠軍欄目：web開發(fā)

前言

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

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

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

什么是 APP_INITIALIZER 注入器

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

創(chuàng)建 AppLoad 模塊

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

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 { }

注意一下幾點：

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

創(chuàng)建 App Load Service

AppLoadService 應當隔離您在應用初始化期間的作為。當然這不是必須的，您可以使用任何需要的服務。

這里實現(xiàn)了兩個方法我們在前面代碼中使用的方法。在我們的 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;
 }
}

注意以下幾點：

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

運行應用

運行應用，可以在 Console 中查看如下輸出

Angular如何在應用初始化時運行代碼詳解

注意：

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

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

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

參考資料

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

總結

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

向AI問一下細節(jié)

Angular如何在應用初始化時運行代碼詳解

猜你喜歡

最新資訊

相關推薦

相關標簽