下圖是 SAP 電商雲 Spartacus UI 中的一段和 Site Context 處理邏輯相關的程式碼：

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

```typescript
export const contextServiceProviders: Provider[] = [
  BaseSiteService,
  LanguageService,
  CurrencyService,
  {
    provide: APP_INITIALIZER,
    useFactory: initializeContext,
    deps: [ConfigInitializerService, SiteContextRoutesHandler],
    multi: true,
  },
];
```

注意第 40 行的標誌位，`multi`，預設值為 false，這意味著在程式碼後註冊的 initializer 的實現，會覆蓋掉先註冊的 initializer provider 實現。換言之，這種情況下，APP_INITIALIZER 的 provider 只能有一個。

如果 `multi: true` 被設定，那麼新的提供者會被新增到之前註冊的提供者中，使得一個令牌的提供者不止一個。當這個令牌被呼叫時，angular會執行所有這些令牌。

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-t9CQg0dA-1657529948839)(https://upload-images.jianshu.io/upload_images/2085791-d9ccecec96655236.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)]

因此，開發人員可以使用 `multi: true` 來建立 multi Provider令牌。這意味著我們可以建立多個函式/服務，並在初始化期間呼叫它。

做一個測試，分別建立兩個 initializer 的實現：

```typescript

export function initializeApp2() {
  return (): Promise<any> => {
    return new Promise((resolve, reject) => {
      console.log(`initializeApp2 called`);
      setTimeout(() => {
        console.log(`initializeApp2 Finished`);
        resolve();
      }, 2000);
    });
  };
}
```

然後使用 multi：true 給同一個 Injection Token `APP_INITIALIZER` 註冊兩個不同的 provider：

```typescript
  providers: [ 
    AppInitService,
    { provide: APP_INITIALIZER,useFactory: initializeApp1, deps: [AppInitService], multi: true},
    { provide: APP_INITIALIZER,useFactory: initializeApp2, multi: true}
  ],
```

最後執行時，這兩個 initializers 會同時得到觸發。

另外，這個例子使用了 `useFactory` 為 Injection Token 註冊 provider.

一個例子：

```typescript
const WINDOW = new InjectionToken<window>('A reference to the window object', {
  factory: () => window,
});
```

上面的例子，使用工廠函式作為提供者來設定 InjectionToken，就好像它是在應用程式的根注入器中顯式定義的一樣。 現在我們可以在應用程式的任意位置使用它：

```typescript
@Component({
  selector: 'my-app'
})
export class AppComponent {
  constructor(@Inject(WINDOW) window: Window) {}
}
```

我們可以使用 `inject` 函式，在工廠函式的執行環境裡，來獲取其他提供者的引用。 讓我們看另一個例子：

```typescript
import { inject, InjectionToken } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

export type TimespanProvider = Observable<string>;

export const TIMESPAN = new InjectionToken('Subscribe to timespan query param', {
  factory() {
    const activatedRoute = inject(ActivatedRoute);

return activatedRoute.queryParams.pipe(
      pluck('timespan'),
      filterNil(),
      distinctUntilChanged()
    );
  },
});
```

上面的例子，我們注入 ActivatedRoute，使用 `inject` 獲得其 provider 例項，併為時間跨度查詢引數返回一個 observable. 將 `Observable<string>` 匯出成新的型別別名：`TimespanProvider`.

這個 Injection Token 的注入例子：

```typescript
@Component({
  selector: 'app-home'
})
export class HomeComponent implements OnInit {
  constructor(@Inject(TIMESPAN) private timespan$: TimespanProvider) {}

ngOnInit() {
    this.timespan$.pipe(untilDestroyed(this)).subscribe(console.log);
  }
}
```

另一個例子：我們有一個 ThemeService 實現類，將使用者當前的 Theme 值暴露出去：

```typescript
@Injectable({ providedIn: 'root' })
export class ThemeService {
  private theme = new Subject<string>();
  theme$ = this.theme.asObservable();

setTheme(theme: string) {
    this.theme.next(theme);
  }
}
```

Component 讀取當前 Theme 的值：

```typescript
@Component({
  selector: 'app-hello',
  template: `<h1>{{ theme$ | async }}</h1>`
})
export class HelloComponent {
  theme$: Observable<string>;

constructor(private themeService: ThemeService) {}

ngOnInit() {
    this.theme$ = this.themeService.theme$;
  }

}
```

採取 Injection Token 的實現方式：

```typescript
export type ActiveThemeProvider = Observable<string>;
export const ACTIVE_THEME = new InjectionToken<activethemeprovider>('Active theme', {
  factory() {
    return inject(ThemeService).theme$;
  }
});
```
首先定義一個新的 `Type`，然後使用 factory 方法，返回 `Observable<string>` 型別的結果。</string></activethemeprovider></string></string></string></string></string></window></any>

Angular InjectionToken APP_INITIALIZER multi 標誌位不同值的情況討論

相關文章