SAP 电商云 Spartacus UI 里的 InjectionToken 应用场景
看個具體的例子:
InjectionToken 構造函數,需要傳一個類型參數進去。
這個 ActionReducerMap 的定義很講究:
export declare type ActionReducerMap<T, V extends Action = Action> = {[p in keyof T]: ActionReducer<T[p], V>; };使用這個類型時,需要傳入兩個類型參數 T 和 V,其中 V 的默認值就是 Action.
ActionReducerMap 描述了一個對象,其字段名必須是 State 字段的其中之一,該字段的類型為 ActionReducer<T[p],V>
我們看,State 類型的字段名稱正好為 ROUTING_FEATURE 即 ‘router’:
即下圖紅色高亮區域:
那么 router 的類型呢?
必須為 ActionReducer<State[p],V>
State[p] = State[‘router’] 即我們自定義的 RouterState
也就是說,ActionReducer 現在第一個類型參數即 T,變成了 RouterState.
ActionReducer =
{
函數
}
括號里是一個函數,輸入參數有兩個:
- state:類型為 RouterState
- action:參數為 Action
返回參數類型為 RouterState
正好和我們應用代碼里定義的一致:
使用 injection Token 的場合
每當你要注入的類型無法確定(沒有運行時表示形式)時,例如在注入接口、可調用類型、數組或參數化類型時,都應使用 InjectionToken.
Token 構造函數里的類型參數 T:
InjectionToken 在 T 上的參數化版本,T 是 Injector 返回的對象的類型。這提供了更高級別的類型安全性。
下面是 Injection Token 創建的幾種方法。
方法1
const BASE_URL = new InjectionToken<string>('BaseUrl'); const injector =Injector.create({providers: [{provide: BASE_URL, useValue: 'http://localhost'}]}); const url = injector.get(BASE_URL); // here `url` is inferred to be `string` because `BASE_URL` is `InjectionToken<string>`. expect(url).toBe('http://localhost');方法2:創建可以搖樹優化的 injection token
class MyService {constructor(readonly myDep: MyDep) {} }const MY_SERVICE_TOKEN = new InjectionToken<MyService>('Manually constructed MyService', {providedIn: 'root',factory: () => new MyService(inject(MyDep)), });const instance = injector.get(MY_SERVICE_TOKEN); expect(instance instanceof MyService).toBeTruthy(); expect(instance.myDep instanceof MyDep).toBeTruthy();看一個 Spartacus 例子:
routing.module.ts 里提供了 reducerToken 和 reducerToken providers 的實現:采取 factory 實現:
reducerProvider 里維護了 reducerToken 和如何 provide 其的 factory,reducerProvider 什么時候被引用呢?
答案是配置在了 RoutingModule 里:
最后我通過下列代碼拿到 token 對應的運行時實例:
constructor(_injector: Injector){const jerry = _injector.get(reducerToken);console.log('Jerry token: ', jerry);}就是一個 reducer 函數:
這個函數定義如下:
更多Jerry的原創文章,盡在:“汪子熙”:
總結
以上是生活随笔為你收集整理的SAP 电商云 Spartacus UI 里的 InjectionToken 应用场景的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 抖音火山版省流模式怎么设置
- 下一篇: 关于 SAP 电商云 Spartacus