SAP Spartacus的自定义Angular Url Matcher实现

简介: SAP Spartacus的自定义Angular Url Matcher实现

https://microlearning.opensap.com/media/Custom+Angular+URL+Matchers+in+Spartacus+Storefront±+SAP+Commerce+Cloud/1_hhjqkiuy/178316081

Angular, and Spartacus by extension, allows you to configure string patterns to match routes against URLs. An example is /product/:productCode, which has two segments. The first segment, product, is a static segment that determines the URL is a product page type, and the second segment, :productCode, is a dynamic parameter.


上面提到的url,有两个segments,其中第一个product segment,为静态segment,说明该url代表一个product page type,而第二个segment :productCode, 是一个动态参数。


有时存在需求,需要在一个segment内同时实现静态和动态两种segment:


However, there may be cases where you need to work with URL segments that contain both static and dynamic parts within a single segment. An example is /macbook-p, where mackbook is a dynamic product code, and -p is a static part that determines the URL is a product page type. In this case, you need to implement a custom Angular UrlMatcher.


这种需求通过UrlMatcher来满足。


源代码:

image.png


将自定义实现的matcher配置到module里:

image.png


image.png

上面代码中paths里传入的:customProductCode是一个新的属性,需要通过normalizer添加进去:

image.png


最后将custom normalizer注入到app module中:


image.png

相关文章
|
1月前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
|
1月前
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
【超实用】Angular如何修改当前页面网页浏览器url后面?param1=xxx&param2=xxx参数(多用于通过浏览器地址参数保存用户当前操作状态的需求),实现监听url路由切换、状态变化。
|
1月前
|
JavaScript
Angular Input 注解在 Spartacus 项目开发中的实际应用场景一例
Angular Input 注解在 Spartacus 项目开发中的实际应用场景一例
33 0
|
1月前
用Angular获取当前地址的路径path(也就是网址/#后面那坨url)
用Angular获取当前地址的路径path(也就是网址/#后面那坨url)
|
1月前
Angular获取Location对象,获取当前网页url、hash、hostname、href、pathname、port、protocal
Angular获取Location对象,获取当前网页url、hash、hostname、href、pathname、port、protocal
|
8月前
|
Web App开发 资源调度 开发者
SAP Fiori Elements 应用 OData 元数据请求 url 里的模型名称决定逻辑
SAP Fiori Elements 应用 OData 元数据请求 url 里的模型名称决定逻辑
55 0
|
8月前
|
存储 JavaScript 前端开发
SAP UI5 OData 请求 url 中的参数 sap-value-list=none
SAP UI5 OData 请求 url 中的参数 sap-value-list=none
43 0
|
8月前
|
缓存
SAP Fiori Elements 应用加载时的 url 参数 sap-ui-xx-viewCache=false
SAP Fiori Elements 应用加载时的 url 参数 sap-ui-xx-viewCache=false
30 0
|
8月前
|
缓存 开发工具 开发者
Fiori Elements 应用url 里参数 sap-ui-xx-viewCache=false 的作用
Fiori Elements 应用url 里参数 sap-ui-xx-viewCache=false 的作用
44 0
|
8月前
|
前端开发
给 SAP Fiori Launchpad 配置自定义 url
给 SAP Fiori Launchpad 配置自定义 url
95 0