SAP Spartacus Popover Directive 构造函数的用途分析

简介: SAP Spartacus Popover Directive 构造函数的用途分析

该构造函数位于文件 popover.directive.ts 里:

image.png


image.png



第 11 行 cxPopOver Directive 施加到 button 元素上之后,运行时,cxPopOver Directive 的构造函数触发。其参数,既有应用程序定义的类型,比如 PositioningService, 也有框架使用的类型,比如 ElementRef,ViewContainerRef 等等。


image.png


element: 该 Directive 绑定的页面元素,在这个例子里是 button.


image.png

viewContainer: 类型为 ViewContainerRef. 三个全是私有属性。

image.png


我们注入这个实例的唯一目的,就是调用其 createComponent 方法。

image.png

createComponent 方法需要输入参数为 containerFactory,后者通过另一个注入参数实例 componentFactoryResolver 提供。componentFactoryResolver 可以理解成制造工厂的工厂函数:需要的输入参数是待生产 Component 的定义,在这个例子里为 PopoverComponent:


image.png


而 createComponent 返回的数据,类型为 ComponentRef, 包含了 PopoverComponent 的实例。


image.png


renderer: Renderer2

引入该属性,是为了调用其 appendChild 方法,把创建好的 PopoverComponent 实例,添加到 DOM 树中去。


之所以不直接操作原生 DOM,是为了跨平台支持。


image.png


changeDetectorRef: ChangeDetectorRef

在 SAP Spartacus 实现中没有用到。


positioningService: PositioningService

在 SAP Spartacus 实现中没有用到。


负责元素 focus 相关的实现。


image.png


winRef: WindowRef

负责将新建的 PopoverComponent 实例中的 DOM 元素,添加到当前 document 的 body 节点上。

image.png



相关文章
|
4月前
|
人工智能 搜索推荐 Serverless
使用金庸的著作,来测试阿里通义千问最新开放的长文档处理功能
使用金庸的著作,来测试阿里通义千问最新开放的长文档处理功能
使用金庸的著作,来测试阿里通义千问最新开放的长文档处理功能
|
4月前
|
存储 前端开发
SAP UI5 federatedLogout 函数源代码分析
SAP UI5 federatedLogout 函数源代码分析
|
11月前
|
存储 对象存储
Spartacus 添加 PWA 应用到 home 的实现原理分析
Spartacus 添加 PWA 应用到 home 的实现原理分析
|
11月前
|
API
SAP Spartacus UI 通过 HTTP Interceptor 给请求添加 Authorization 字段的源代码分析
SAP Spartacus UI 通过 HTTP Interceptor 给请求添加 Authorization 字段的源代码分析
|
4月前
|
网络安全
实战分析 - 为什么有些 SAP ABAP 程序,启动之后界面有些按钮是灰色的试读版
实战分析 - 为什么有些 SAP ABAP 程序,启动之后界面有些按钮是灰色的试读版
|
4月前
|
开发者
jQuery.Deferred 在 SAP UI5 源代码中的应用分析
jQuery.Deferred 在 SAP UI5 源代码中的应用分析
|
4月前
|
数据库
SAP ABAP 更新函数(Update Function Module)执行出错的原因分析试读版
SAP ABAP 更新函数(Update Function Module)执行出错的原因分析试读版
|
4月前
|
数据库
130. SAP ABAP 更新函数(Update Function Module)执行出错的原因分析
130. SAP ABAP 更新函数(Update Function Module)执行出错的原因分析
|
11月前
|
编译器
Spartacus 4.3.x 版本导入 Cart 到 App Module 构造函数的错误消息
Spartacus 4.3.x 版本导入 Cart 到 App Module 构造函数的错误消息
|
11月前
|
JavaScript 前端开发 应用服务中间件
SAP UI5 本地开发时 ui5.yaml 文件对构建 Release 版本应用目录的影响分析试读版
SAP UI5 本地开发时 ui5.yaml 文件对构建 Release 版本应用目录的影响分析试读版