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


相关文章
|
3月前
|
消息中间件 存储 监控
什么是 SAP CRM Middleware Component 里的 PRODUCT_R3_ADAPTER
什么是 SAP CRM Middleware Component 里的 PRODUCT_R3_ADAPTER
24 0
|
6月前
|
SQL 数据库 数据安全/隐私保护
SAP CDS view 定义的数据库视图和传统 SQL 语句定义视图的区别
SAP CDS view 定义的数据库视图和传统 SQL 语句定义视图的区别
75 0
|
2月前
|
XML 存储 JavaScript
关于 SAP Fiori Elements List Report 里的 TableCell.fragment.xml 头部声明
关于 SAP Fiori Elements List Report 里的 TableCell.fragment.xml 头部声明
22 0
|
3月前
|
JSON 开发者 数据格式
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
26 0
|
3月前
|
设计模式 前端开发 JavaScript
关于 SAP Fiori Elements List Report Go 按钮的实现
关于 SAP Fiori Elements List Report Go 按钮的实现
24 0
|
3月前
|
搜索推荐 开发者 UED
关于 SAP Spartacus 层的 UI 设计
关于 SAP Spartacus 层的 UI 设计
40 0
|
3月前
|
开发者 UED
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
24 0
|
5月前
|
前端开发 开发者 容器
SAP Fiori Elements List Report 应用里 Header 字段的绑定路径
SAP Fiori Elements List Report 应用里 Header 字段的绑定路径
40 0
|
6月前
|
Web App开发 XML 数据格式
SAP Fiori Elements List Report 表格新增列扩展方式的工作原理试读版
SAP Fiori Elements List Report 表格新增列扩展方式的工作原理试读版
42 0
|
6月前
|
索引
SAP Fiori Elements List Report 应用里 Header 字段的绑定路径
SAP Fiori Elements List Report 应用里 Header 字段的绑定路径
37 0