APP_INITIALIZER 是 InjectionToken的一個例項。它是 Angular 提供的內建注入令牌。

Angular會在應用載入時執行這個令牌提供的函式。如果函式返回promise，那麼angular會一直等待，直到promise被解析。這將使它成為在應用程式初始化之前執行一些初始化邏輯的理想位置。

Angular 注入器使用 DI 令牌來定位 Angular providers 中的依賴項。我們使用令牌在提供者中註冊依賴項：

```typescript
providers :[{ provide: token, useClass: SomeService }]
```
上面程式碼裡的 `token`，可以是一個 type，一個字串，或者是 InjectionToken 的一個例項。

- type 的例子：

```typescript
providers :[{ provide: productService, useClass: productService}]
```

- 字串的例子：

```typescript
providers :[ {provide:'MESSAGE', useValue: 'Hello Angular'}]
```

當所使用的型別沒有`執行時表示`時，例如注入介面、可呼叫型別(callable type) 等，就會使用 InjectionToken - TypeScript 程式碼裡的 interface，被編譯成 JavaScript 之後，後者從程式語言層面不存在 interface 這種 representation. 此時可以使用 InjectionToken.

```typescript
export const HELLO_MESSAGE = new InjectionToken<string>('Hello Angular'); 
providers :[ { provide: HELLO_MESSAGE, useValue: 'Hello World!' }];
```

如前所述，APP_INITIALIZER在應用程式初始化時執行。Angular會暫停應用的初始化，直到APP_INITIALIZER提供的所有函式執行完畢。如果其中任何一個初始化器返回一個promise，那麼angular就會等待它的解析，然後再繼續進行App的初始化。

![](https://img-blog.csdnimg.cn/img_convert/d351c4fd1a939ba15d818c5902c7f4f3.png)

這使我們有機會連線到初始化程式並執行一些應用程式自定義邏輯。可以載入執行時配置資訊。從後臺載入重要資料等。

看一個例子。新建檔案 `app-init.service.ts`：

```typescript
import { Injectable }  from '@angular/core';
 
@Injectable()
export class AppInitService {
 
    constructor() {
    }
    
    Init() {
 
        return new Promise<void>((resolve, reject) => {
            console.log("AppInitService.init() called");
            ////do your initialisation stuff here  
            setTimeout(() => {
                console.log('AppInitService Finished');
                resolve();
            }, 6000);
 
        });
    }
}
```

app.module.ts 的實現：

```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, APP_INITIALIZER } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
 
import { AppRoutingModule } from './app-routing.module';
 
import { AppComponent } from './app.component';
import { AboutUsComponent } from './about-us.component';
import { HomeComponent } from './home.component';
import { ContactUsComponent } from './contact-us.component';
 
import { AppInitService } from './app-init.service';
 
export function initializeApp1(appInitService: AppInitService) {
  return (): Promise<any> => { 
    return appInitService.Init();
  }
}
 
@NgModule({
  declarations: [
    AppComponent, AboutUsComponent,HomeComponent,ContactUsComponent
  ],
  imports: [
    HttpClientModule,
    BrowserModule,
    AppRoutingModule,
  ],
  providers: [ 
    AppInitService,
    { provide: APP_INITIALIZER,useFactory: initializeApp1, deps: [AppInitService], multi: true}
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }
```
上面的程式碼，使用了 InjectionToken `APP_INITIALIZER` 來提供函式 initializeApp1，後者呼叫了我們 service class 的 init 方法。

Angular的依賴注入會把依賴注入到類和元件中，但不會注入到函式中。而我們的initializeApp1是一個函式，需要將AppInitService作為引數注入。因此我們透過使用 `deps` 標誌來做到這一點，並讓 Angular 知道它需要建立一個AppInitService的例項，並將它注入到initializeApp1函式中。

`multi: true` 建立 multi provider DI 令牌。這意味著可以為DI令牌提供提供程式陣列。

如果 `multi: false(預設值)`被設定並且多次使用一個令牌，最後註冊的將令牌將覆蓋之前所有的令牌。也就是說，令牌只能有一個 provider.</any></void></string>

Angular InjectionToken APP_INITIALIZER 的實現方法介紹

相關文章