SAP Spartacus List Component 里定义的待显示 Popover 内容,如何传递到 Popover Component 里的?

简介: SAP Spartacus List Component 里定义的待显示 Popover 内容,如何传递到 Popover Component 里的?

中心思想:这个传递以 Popover Directive 为桥梁。


PopoverComponent里的 content 属性:


string 或者 TemplateRef,后者是 ng-template 即模板实例。


image.png


PopoverDirective 里的 cxPopover:


image.png


运行时,渲染出的 Popover,内容实际上是开发人员提供的,放在 List Component 里:


image.png


上图 listHint 是 ng-template 定义的模板:


image.png


运行时,#listHint 代表的内容,首先通过 Popover Directive 的 cxPopover input,传入到 Popover Directive 内部。


然后,Popover Directive 实例化 Popover Component 时,将 cxPopover 传入 Popover Component 的 content input:


image.png


最后,通过 ng-content 结合 ngTemplateOutlet 将应用开发人员通过 ng-template 传入的模板内容显示出来:


image.png


image.png


相关文章
关于 Spartacus ProdutList Component Service model$ 的填充逻辑
关于 Spartacus ProdutList Component Service model$ 的填充逻辑
|
6月前
|
存储 缓存 数据管理
Spartacus cart list item 删除的实现原理
Spartacus cart list item 删除的实现原理
Spartacus 2211 无法在文件夹下使用 ng g component 创建新的 Component
Spartacus 2211 无法在文件夹下使用 ng g component 创建新的 Component
Spartacus 2211 无法在文件夹下使用 ng g component 创建新的 Component
|
SQL 数据库 数据安全/隐私保护
SAP CDS view 定义的数据库视图和传统 SQL 语句定义视图的区别
SAP CDS view 定义的数据库视图和传统 SQL 语句定义视图的区别
|
6月前
|
存储 缓存 前端开发
关于 SAP Spartacus Optimization Engine 里的 cache 参数使用注意事项
关于 SAP Spartacus Optimization Engine 里的 cache 参数使用注意事项
|
6月前
|
JSON 开发者 数据格式
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
|
6月前
|
搜索推荐 开发者 UED
关于 SAP Spartacus 层的 UI 设计
关于 SAP Spartacus 层的 UI 设计
|
6月前
|
开发者 UED
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
|
开发者
SAP UI5 manifest.json 里定义的 sap.ui.viewExtensions 区域的解析代码位置
SAP UI5 manifest.json 里定义的 sap.ui.viewExtensions 区域的解析代码位置
|
前端开发 开发者
如何在 SAP Fiori Elements 应用的 manifest.json 里定义注解
如何在 SAP Fiori Elements 应用的 manifest.json 里定义注解