Angular 如何在啟動(dòng)時(shí)執(zhí)行初始化代碼

首先介紹APP_INITIALIZER

APP_INITIALIZER 是一個(gè)InjectionToken ，是Angular默認(rèn)提供的。在之前的AngularJs中，每一個(gè)能被注入的Service都會(huì)有一個(gè)InjectionToken來標(biāo)記，從這個(gè)細(xì)節(jié)來看，在Angular中大概也是這樣的思路。

在NgModule的providers屬性中，可以用一個(gè)token和一個(gè)class來標(biāo)記能被注入的service：

provider:[{provide:token,useClass:YourServece}];
//or
providers:[ {provide:'MESSAGE', useValue: 'Hello Angular'}];
//or
export const MESSAGE = new InjectionToken<string>('Hello Angular'); 
providers :[ { provide: HELLO_MESSAGE, useValue: 'Hello World!' }];
//這里的token可以是string或者某種type，或者是InjectionToken的一個(gè)實(shí)例

那么顯而易見的思路是：將APP_INITIALIZER這個(gè)token與想要執(zhí)行的初始化邏輯綁定。Angular會(huì)將綁定的邏輯在App初始化的時(shí)候執(zhí)行，如果這段邏輯返回的是一個(gè)Promise，Angular會(huì)一直等待Promise完成后再進(jìn)行之后的工作。

來一段真實(shí)代碼看看

import { BrowserModule } from '@angular/platform-browser';
import {APP_INITIALIZER, NgModule} from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {UIKitModule} from "./uikit/uikit.module";
import {ServicesModule} from "./services/services.module";
import {init} from 'leancloud-storage';

const initLeancloud=()=>{
  return ()=>{init({appId:'xxxxx',appKey:'xxxxxx'});}
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    UIKitModule,
    ServicesModule,
    AppRoutingModule,
  ],
  providers: [
    {provide:APP_INITIALIZER,useFactory:initLeancloud,multi:true},
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

這里有幾個(gè)比較奇怪的地方：

1. useFactory：當(dāng)你的邏輯是一個(gè)function的時(shí)候就用這個(gè)字段，當(dāng)時(shí)angular推薦你用class。
2. multi：如果是true，說明這個(gè)provideToken可以被重復(fù)使用，如果是false，就說明只能用一次。那么什么是反復(fù)使用呢？看看下面這段代碼。

providers: [
    {provide:APP_INITIALIZER,useFactory:initLeancloud,multi:true},
    {provide:APP_INITIALIZER,useFactory:otherFunction,multi:true},
],

顯然很明顯，這個(gè)APP_INITIALIZER被使用了兩次，這兩個(gè)function都會(huì)在Angular啟動(dòng)的時(shí)候執(zhí)行，從上到下。此時(shí)，如果multi是false，那么下面的function就會(huì)把上面的覆蓋。

需要注意的是，使用useFactory的時(shí)候，所指定的function一定要有return值，并且return要返回一個(gè)函數(shù)。