SAP Spartacus B2B Popover Directive 和 Popover Component 的生命周期管理

解析 SAP Spartacus B2B list 实现，即list.component.html时，因为在Component 模板里遇到了[cxPopover]指令，因此触发依赖注入：

首先创建directive实例：

当点击宿主元素 icon 时，因为@HostListener 注解的原因，一旦宿主元素发生了 click 事件后，我们定义在 directive 实现里的handleOpen方法会自动被调用：

下图标号为1的componentFactoryResolver，来自Popover directive 构造函数的依赖注入；

标号为2的PopoverComponent，来自我们在另一个文件里实现并通过export 导出的Component：

标号为3的PopoverContainer，是this.viewContainer(同样是构造函数依赖注入的结果)调用 createComponent 返回的结果，其结构为：

this.popoverContainer.changeDetectorRef.detectChanges();

手动触发PopoverComponent的Change detection - 变更检测

然后调用handlePopoverEvents，执行事件处理注册逻辑：

更多Jerry的原创文章，尽在：“汪子熙”:

SAP Spartacus B2B Popover Directive 和 Popover Component 的生命周期管理相关推荐

SAP Spartacus B2B 列表页面的 (i) icon popover Component 的声明位置
SAP Spartacus B2B 页面的列表页面,一共有 6 个类似 SAP Fiori Language 里的 tile(磁贴): 点击去之后,能看到列表页面有一个绿色 icon 图标,点击之后, ...
SAP Spartacus B2B 页面信息提示图标的弹出窗口显示实现逻辑
这个弹出窗口的技术实现,通过SAP Spartacus 自定义的popover Component实现而成: 注意,当我刚接触Angular时,误以为下图标号为1的a标签,和标号为2的自定义标签cx- ...
SAP Spartacus B2B 页面 Disable 按钮的显示原理
SAP Spartacus B2B 页面 disable 按钮如下图所示. 这个高亮的 disable 按钮,和左边相邻的 Edit 按钮,实现位于不同的 Component. disable 按钮有 ...
SAP Spartacus B2B OrgUnit 和 OrgUser 的路由映射差异比较
SAP Spartacus B2B 页面类似 SAP Fiori Launchpad,共有 6 个 tile(磁贴),点击某个磁贴,能跳转到对应的列表页面. 路由映射就是指点击某个 url 之后(例如 ...
SAP Spartacus B2B User 页面的数据读取逻辑设计
点击SAP Spartacus B2B的Users页面后: 触发selector: 看到user 列表: B2B user模块,从设计上说,位于Spartacus工程项目的feature-libs文件 ...
SAP Spartacus Table cell显示数据类型的Component决定逻辑
以SAP Spartacus B2B org unit list为例,table cell到底用什么样的Component来显示数据,取决于units.config.ts文件里定义的配置数据units ...
SAP Spartacus B2B ListComponent响应回车事件的实现
SAP Spartacus B2B的List页面: 和回车键事件相关的实现: <cx-table*ngIf="data.values?.length > 0; else empt ...
SAP Spartacus organization unit list的实现Component
SAP Spartacus B2B My Company功能里的org unit list实现: http://localhost:4200/powertools-spa/en/USD/organiz ...
SAP Spartacus B2B table的配置信息的merge原理
以SAP Spartacus b2b unit table的配置信息为例:位于文件units.config.ts里: 运行时,这些配置信息,被merge在table.service.ts的this.c ...

SAP Spartacus B2B Popover Directive 和 Popover Component 的生命周期管理

SAP Spartacus B2B Popover Directive 和 Popover Component 的生命周期管理相关推荐

最新文章

热门文章