# providers

index.ts 裡只有兩份 export：
![](https://img-blog.csdnimg.cn/img_convert/16a79d6e465d602538d4ea67ef1dcf78.png)

## context-ids.ts

是一些引數常量。

```typescript
export const LANGUAGE_CONTEXT_ID = 'language';
export const CURRENCY_CONTEXT_ID = 'currency';
export const BASE_SITE_CONTEXT_ID = 'baseSite';
export const THEME_CONTEXT_ID = 'theme';

```
## context-service-map.ts (ContextServiceMap)

ContextServiceMap 是一個 map 結構，key 是字串，value 是這種 site context 對應的 SiteContext Facade 類？

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

比如我們之前在 `facade` 資料夾裡討論過的：

```typescript
@Injectable()
export class CurrencyService implements SiteContext<currency> {
  constructor(
    protected store: Store<statewithsitecontext>,
    protected config: SiteContextConfig
  ) {}
```
### serviceMapFactory

工廠函式，負責提供 ContextServiceMap 的實現？
![](https://img-blog.csdnimg.cn/img_convert/5b7d7ba3386e6b9405d1d5b48590d2dd.png)

什麼時候 ContextServiceMap 的例項會被呼叫到？

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

這裡只有類的定義，並沒有類的例項化過程：
![](https://img-blog.csdnimg.cn/img_convert/0a56270c088d01b09aaad255a13bded7.png)

## site-context-params-providers (siteContextParamsProviders)

這個類沒有被 index.ts 匯出。從註釋也能看出，這是有意為之，不將其暴露到 public API 去。

```typescript
import { Provider } from '@angular/core';
import { UrlSerializer } from '@angular/router';
import { SiteContextParamsService } from '../services/site-context-params.service';
import { SiteContextUrlSerializer } from '../services/site-context-url-serializer';

// functions below should not be exposed in public API:

export const siteContextParamsProviders: Provider[] = [
  SiteContextParamsService,
  SiteContextUrlSerializer,
  { provide: UrlSerializer, useExisting: SiteContextUrlSerializer },
];

```

提供了一些 provider 的實現，SiteContextUrlSerializer 提供了 Angular UrlSerializer 的實現。

## context-service-providers.ts
### initializeContext
這個函式就是一個包裹函式，從 site-context 平級的 config 資料夾裡匯入 ConfigInitializerService 和 site-context 內部的 service 資料夾內的 SiteContextRoutesHandler，然後呼叫這兩個匯入的函式的對應方法。

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

回答兩個問題：

(1) initializeContext 函式什麼時候被呼叫？

這個呼叫又分為兩個維度來討論。

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

第13行的程式碼，在 Angular 依賴注入框架內執行：

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

這比較合理，因為就在這個檔案的尾部，`initializeContext` 作為 `APP_INITIALIZER` 被呼叫。

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

稍後，Angular APP_INITIALIZER 所有的 provider 也被呼叫：

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

(2) 這個函式的 23 行 init 方法執行了什麼邏輯？

這個 init 方法，就是 `services` 問就按家裡的實現，即透過 url 裡包含的 language 和 currency 引數，設定 site context 的過程。

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

# 總結

本文介紹了 SAP 電商雲 Spartacus UI site-context 模組裡 providers 資料夾裡的實現明細。</statewithsitecontext></currency>

SAP 電商雲 Spartacus UI Site Context 模組裡 Providers 元件的實現明細

相關文章