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的原创文章,尽在:“汪子熙”:
相关文章
- 55. 如何将本地 SAP UI5 应用通过 Node.js Express 部署到公网上
- 8. SAP UI5 应用多语言国际化(Internationalization)的支持
- SAP Corbu Theme 在浏览器和 SAPGUI 应用中的使用场景
- SAP UI5 应用中的 sap.ui.require.toUrl 使用场景
- SAP UI5 应用中的 sap.ui.require 使用场景
- SAP UI5 应用中的 sap.ui.require 使用场景
- SAP CAP Fiori Elements 应用配置 UI 的两种方式以及自定义 index.html
- 使用 SAP Fiori Tools 部署 SAP UI5 应用到 ABAP 服务器时遇到的各种错误和解决办法
- SAP UI5 应用 index.html 里 data-sap-ui-resourceroots 指令的含义和作用
- SAP UI5应用在SAP WebIDE里clone之后出现404 not found error for sap-ui-core.js错误的原因分析
- 一个用于SAP UI5学习的脚手架应用,没有任何后台API的依赖
- SAP CRM Fiori应用My Note的OData调用设计
- UI5应用clone到webIDE后,如何处理无法加载sap-ui-core.js的错误
- SAP UI5应用的sap-ui-core.js被加载之前,还有哪些js文件被加载了
- Cross domain issue for an pure HTML5 application on SAP Cloud Platform
- 为什么我开发的SAP UI5应用里的group by 功能不工作?
- SAP One Order应用的跟踪工具CRMD_TRACE_SET
- SAP Spartacus PagelayoutComponent里的template
- SAP Cloud for Customer 里的锁操作介绍
- SAP Fiori 应用 Adapt UI 动态显示或者隐藏的技术设计细节解析
- SAP UI5 应用里 FlexBox 控件的设计原理
- SAP UI5 应用开发教程之五十九 - 如何在 SAP UI5 应用里显示世界地图试读版
- SAP UI5应用在SAP WebIDE里clone之后出现404 not found error for sap-ui-core.js错误的原因分析
- 如何定制化SAP Fiori标准应用里UI字段的标签
- 如何将SAP CRM里维护的Account图片显示到Fiori应用中
- Fiori Fundamentals和SAP UI5 Web Components
- 部署在SAP ABAP服务器上的SAP UI5应用,resource root的计算逻辑
- 如何找到 SAP 电商云 Spartacus UI 产品明细界面对应的 Angular 实现 Component 名称