SAP Spartacus Site Context 实现专题页面(七)

简介: SAP Spartacus Site Context 实现专题页面

site-context-url-serializer.ts (SiteContextUrlSerializer)

通过这种方式定义一个接口,表示 url parameters 支持多个。

export interface SiteContextUrlParams {
  [name: string]: string;
}

下面的代码演示了如何使用装饰器设计模式,对 Angular 标准的 UrlTree 进行修饰:

export interface UrlTreeWithSiteContext extends UrlTree {
  siteContext?: SiteContextUrlParams;
}

这种策略就是首先定义新增的字段 siteContext 对应的数据类型。

urlExtractContextParameters

从输入的浏览器地址栏 url 里,提取 context 参数列表:

7.png

使用正则表达式分离出 url 和 query 两部分:

8.png

urlEncodingParameters

这是一个 getter:

  /**
   * Names of site context parameters encoded in the URL
   */
  protected get urlEncodingParameters(): string[] {
    return this.siteContextParams.getUrlEncodingParameters();
  }

从注释看,包含的仅仅是参数名称。通过注入的 siteContextParams 取得。

后者从全局配置对象里取得:

  getUrlEncodingParameters(): string[] {
    return (this.config.context && this.config.context.urlParameters) || [];
  }

这个 getter 的值为一个字符串数组,包含了三个元素:baseSite,language 和 currency

image.png

拿到 baseSite 在 config 对象里配置的值:

image.png

最后结果:


image.png

parse

它返回由已识别参数缩短的给定 URL 的 UrlTree,但将参数值保存在 UrlTree 的自定义属性中:siteContext

这个方法被 Angular Router 框架调用。

image.png

将 site context 保存到 urlTree 结构的自定义属性字段 siteContext 上:

image.png

最后 parse 完成的结果:

11.png

serialize

也会被 Angular Router 框架调用。

传入的 Urltree 数据结构,已经包含了 siteContext 自定义属性的值:

12.png

  /**
   * Returns the site context parameters stored in the custom property
   * of the UrlTree: `siteContext`.
   */
  urlTreeExtractContextParameters(
    urlTree: UrlTreeWithSiteContext
  ): SiteContextUrlParams {
    return urlTree.siteContext ? urlTree.siteContext : {};
  }

最后序列化之后的 url:

13.png

目录
相关文章
|
前端开发 UED 开发者
SAP Spartacus 开源项目中 $skipComponentStyles 的作用介绍
SAP Spartacus 开源项目中 $skipComponentStyles 的作用介绍
185 0
Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题(3)
Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题
|
JSON 数据格式
Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题(2)
Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题
Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题(1)
Spartacus Storefront 产品明细页面里的 Add to Wish 动态隐藏问题
SAP 电商云 Spartacus UI Configurable Product 的页面设置(3)
SAP 电商云 Spartacus UI Configurable Product 的页面设置
SAP 电商云 Spartacus UI Configurable Product 的页面设置(2)
SAP 电商云 Spartacus UI Configurable Product 的页面设置
SAP 电商云 Spartacus UI Configurable Product 的页面设置(1)
SAP 电商云 Spartacus UI Configurable Product 的页面设置(1)
|
XML 测试技术 区块链
SAP 电商云 Spartacus UI Configurable Product 的页面设置(1)
SAP 电商云 Spartacus UI Configurable Product 的页面设置
关于 SAP 电商云 Spartacus UI Navigation Service 执行的一些明细(2)
关于 SAP 电商云 Spartacus UI Navigation Service 执行的一些明细
关于 SAP 电商云 Spartacus UI Navigation Service 执行的一些明细(1)
关于 SAP 电商云 Spartacus UI Navigation Service 执行的一些明细