SAP Spartacus PageLayoutComponent 如何知道自己应该显示哪些具体内容

2024-05-08 20:54:20

我们以前介绍过，经过 SAP Spartacus 路由配置后的 routes 数组，其 route 数据结构的 Component 属性，清一色指向 generic 的 PageLayoutComponent，那么后者怎么知道自己应该加载哪些 Angular Component 的数据呢？

我们首先看看是哪些 template 调用了 PageLayoutComponent 的 selector：

只有三处：

运行时却有四处，这不奇怪，因为 product 明细页面是通过路由加载的，故出现在 router-outlet 下面。

在其构造函数里加打印语句是无济于事的，因为这个 Component 的所有字段都是 Observable 类型，得 subscribe 了才能看到。

所以我在其 @input 字段上设置了一个断点：

渲染触发点是第2行的 cxOutlet，触发第10行的 cx-page-layout Component 的创建：

Component 实例(即 PageLayoutComponent)创建完毕后，给其 input 属性赋值：

上图的赋值，会触发下图第14行代码执行。

section$ 是一个 subject，其 next 逻辑是遍历其 listener，逐一通知：

在模板文件 async pipe 执行时，触发 Observable 的执行：

根据 page, section 和 breakpoint，拿到该 section 里的 slots：

layoutslot 的 key 是 page template：

这个 page template 里并没有一个 section 名叫 header：

所以我们就 fallback 到全局配置里去取 header 的 slot 配置：

getResponsiveSlotConfig：

先看 layoutConfig 里有没有专门为 xl 而设置的配置，发现没有，只有 lg 的：

就找和 xl 最接近的，答案是 lg：

现在就知道了：LandingPage2Template 模板的 header 区域，应该显示下列这些 slots：

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

SAP Spartacus PageLayoutComponent 如何知道自己应该显示哪些具体内容相关推荐

如何查看 SAP Spartacus PageLayoutComponent 里的 template$ 的值
SAP Spartacus PageLayoutService.ts 里的 templateName$ get 操作:返回一个 Observable 对象,包裹的类型为 string. pipe 的第 ...
SAP Spartacus 404 Not found页面的显示机制 - canActivateNotFoundPage
这个方法位于类CmsPageGuardService内. 当我们请求一个实际并不存在的page时, 因为1这个path对应的route configuration里的protected字段为undef ...
SAP Spartacus的登录页面的用户名显示逻辑
SAP Spartacus登录页面如下图所示: 通过login form用户输入的用户名和密码去换取token,拿到token后,调用另一个API,将token作为Authorization字段输入: ...
SAP Spartacus B2B 页面 Disable 按钮的显示原理
SAP Spartacus B2B 页面 disable 按钮如下图所示. 这个高亮的 disable 按钮,和左边相邻的 Edit 按钮,实现位于不同的 Component. disable 按钮有 ...
SAP Spartacus PagelayoutComponent里的section和slot
Page包含slots,slots包含Components. Spartacus使用page template来组织slots和Components. 一个page template包含了一些可被全局 ...
在SAP Spartacus产品明细页面用outlet显示自定义数据
首先创建一个新的Angular module和Component: 这个新的module,因为要使用Outlet功能,所以需要从@Spartacus/storefront里导入OutletRefMod ...
如何让SAP Spartacus的非英语页面正常显示
如下图所示,当修改Spartacus的语言成德语时,我们在界面上看到很多用大括号包裹起来的占位符,这些占位符是Spartacus internationalization(i18n)支持的resour ...
SAP Spartacus split view控制同屏显示最大视图数的配置
位于文件_split-view.scss内: 修改–cx-max-views的值.改为1的效果,同屏只允许最多一个view处于激活状态: 修改成3: 同屏最多显示3个视图: 更多Jerry的原创文章, ...
SAP Spartacus产品明细页面用Observable显示产品名称
具体实现: import { Component, OnInit } from '@angular/core'; import { ActiveCartService, Product } from ...

最新文章

热门文章