SAP Spartacus org unit list和unit detail的分屏显示原理

如下图所示，这两个页面的顶层节点都是cx-org-unit-list:

再下一层节点是cx-org-list:

再下层cx-split-view, active-view：2，意思是当前有两个处于激活状态的view：

cx-org-unit-details
左边的unit list view的属性–cx-view-position: 0, 索引为0，第一个视图：

右边的unit detail索引为1：

现在到源代码里去查看cx-split-view节点下面是否有cx-org-unit-details这个子节点：

在运行时，router-outlet子节点后面，动态插入了unitDetail页面：

动态插入的调用栈：

newChild指向待插入的cx-org-unit-details节点，而refChild是anchor node：

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

SAP Spartacus org unit list和unit detail的分屏显示原理相关推荐

SAP Spartacus B2B 页面信息提示图标的弹出窗口显示实现逻辑
这个弹出窗口的技术实现,通过SAP Spartacus 自定义的popover Component实现而成: 注意,当我刚接触Angular时,误以为下图标号为1的a标签,和标号为2的自定义标签cx- ...
SAP Spartacus MyCompany菜单里Org unit的Add按钮Accessibility问题初始分析
如图:敲下tab之后 Collapse all的tab focus border遮住了Add 按钮: padding 15px起的作用: 去掉padding之后: 增加button的padding没有 ...
SAP Spartacus cost center list里通向detail页面的url生成逻辑
在cell.component.ts的get route里设置断点,作为调试入口: 需要的参数:cxRoute: 'orgCostCenterDetails', params: code: 'Cust ...
SAP Spartacus B2B Org Unit树状结构的ghost数据
在下列org-unit.effect.ts的第147行,即org unit成功取数之后的callback里设置断点: 然后就能看到ghost数据了: 这些灰色的矩形框显示的就是SAP Spartacu ...
SAP Spartacus Org Unit List响应回车案件的实现原理
我在SAP Spartacus Org Unit List里,用tab键选中某个行项目后,敲回车键: 首先会在屏幕右半部份显示一个只包含布局不包含数据的页面: 待数据加载完成之后,右边也能显示完整的页 ...
SAP Spartacus organization unit list的实现Component
SAP Spartacus B2B My Company功能里的org unit list实现: http://localhost:4200/powertools-spa/en/USD/organiz ...
SAP Spartacus organization unit list抬头显示所有unit的标题实现
如下图高亮区域所示:All Units(39)的实现原理实现在下图这段高亮代码里: viewType: unit 翻译代码的实现: 翻译的实现: key:unit.header 将unit.head ...
SAP Spartacus org unit页面的三种focus border及细节讨论
最外面的矩形框,是table row里任意一个元素被focus之后,触发整个cx-table :focus-within的选择器后生成的效果: 中间的一条竖线,是a标签 focus后的效果: butt ...
如何从 SAP Spartacus Product Detail 页面，找到其 Angular 实现 Component 的位置
如图:假设我们通过下列 url,打开 SAP Spartacus 一个产品的明细页面,我们想找出是哪个 Angular Component,实现了该明细页面. http://localhost:420 ...

SAP Spartacus org unit list和unit detail的分屏显示原理

SAP Spartacus org unit list和unit detail的分屏显示原理相关推荐

最新文章

热门文章