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 UI 里如何捕捉语言设置的更改
我们知道在 SAP 电商云 Spartacus UI 里,用户可以通过下拉菜单更改当前访问 site 的语言: 监控语言变化的代码: this.subscription.add(this.langua ...
- 在 SAP 电商云 Spartacus UI 里手动注入 module 的几种排列组合
先把所有的排列组合罗列如下: (1) 通过构造函数注入 QuickOrderFacade,但不调用其方法 (2) 通过构造函数注入 QuickOrderFacade,调用其方法 (3) 手动通过 in ...
- 如何在 SAP 电商云 Spartacus UI 里新建一个页面
因为 SAP Spartacus UI 是基于 CMS 驱动的,因此流程是:我们首先在 SAP Commerce Cloud Backoffice 创建新的 content page, CMS Com ...
- 如何在 SAP 电商云 Spartacus UI 里访问 CMS Component data 数据
答案是采用 CmsComponentData 这个服务. 看个实际例子: CmsQuickOrderComponent 的定义,维护在 models 文件夹里: 运行时,只能访问到上图新 extend ...
- 在 SAP 电商云 Spartacus UI 里使用自定义配置控制 UI 调试的开关
在 page-slot.module.ts 里,定义一个配置对象 ConfigUIDebug. 这个配置对象定义在 cms-component-data.ts 的 ConfigUIDebug 对象里, ...
- SAP 电商云 Spartacus UI ComponentDataProvider defer 工厂函数
为什么 this.componentService.getItems 最后就触发到 Component-data.provider.ts 工厂函数的执行了? 29行的 getService: getS ...
- SAP 电商云 Spartacus UI 产品搜索结果的设计明细
我们使用如下 url 访问 SAP 电商云 Spartacus UI 产品搜索页面: http://localhost:4000/electronics-spa/en/USD/search/sony ...
- Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例
关于 Mobile First 的概念,请查看我这篇文章:什么是前端开发中的 mobile first 策略. 下图是 SAP 电商云 Spartacus UI 的搜索结果页面: 其布局设计:temp ...
- SAP 电商云 Spartacus UI Proxy Facade 的一个实际例子
如何理解 SAP 电商云 Spartacus UI 中的 proxy facade? Jerry 这篇文章什么是 SAP 电商云 Spartacus UI 的 proxy façade提供了理论上的解 ...
最新文章
- python内存管理机制_[转] Python内存管理机制
- Exchange Server 2013 DAG高可用部署(四)-服务器配置(上)
- 如何把字符串类型转换成整型?
- hihocoder 1490 Tree Restoration
- IOS开发之手写约束
- JZOJ 5933. 【NOIP2018模拟10.27】百鸽笼
- python 邮件报警
- 编译内核_将驱动编译进内核(Kernel)的步骤记录
- 微信小程序 查找兄弟节点_使用C ++程序在链接列表中查找节点
- MySQL 索引 :哈希索引、B+树索引、全文索引
- 自动化部署操作系统-Kickstart+PXE自动部署
- 长假首日全国热门景区出炉 西湖、天安门、广州塔位列前三
- Notification小案例
- 小技巧 ----- Java算法题标准模版
- HeadFirstJava学习心得——javaGUI编程
- 改步数最新方法与工具,很好用
- C语言设计模式——简单工厂模式
- 【Pytorch实战4】基于CIFAR10数据集训练一个分类器
- Qt编写安防视频监控系统(支持win/linux/mac/海康/大华/宇视/264/265等)
- 财务欺诈研究中常用的违规类型