关于前端:SAP-电商云-Spartacus-UI-SiteContextUrlParams-的实现明细介绍

2次阅读

共计 1527 个字符，预计需要花费 4 分钟才能阅读完成。

您能够应用 CMS（后端）中的 pageLabel 配置内容页面的 URL。这些页面标签无奈本地化。

您能够为 Spartacus 中的非内容页面配置 URL。这些次要与产品和类别页面无关。您能够将属性（例如产品名称）配置为 URL 的一部分。例如，产品页面的默认配置是 storefront.com/product/1234，但您能够配置 URL 以蕴含产品相干数据，例如产品或类别题目。

可配置的 URL 通常有助于改良 SEO，但也可用于帮忙将现有解决方案迁徙到 Spartacus：客户能够保留其现有 URL，并在 Spartacus 中配置等效 URL。

通过这种形式定义一个接口，示意 url parameters 反对多个。

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

上面的代码演示了如何应用 装璜器 设计模式，对 Angular 规范的 UrlTree 进行润饰：

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

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

从输出的浏览器地址栏 url 里，提取 context 参数列表：

应用正则表达式拆散出 url 和 query 两局部：

这是一个 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

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

最初后果：

它返回由已辨认参数缩短的给定 URL 的 UrlTree，但将参数值保留在 UrlTree 的自定义属性中：siteContext。

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

将 site context 保留到 urlTree 构造的自定义属性字段 siteContext 上：

最初 parse 实现的后果：

也会被 Angular Router 框架调用。

传入的 Urltree 数据结构，曾经蕴含了 siteContext 自定义属性的值：

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

最初序列化之后的 url：

正文完