SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍 - External Route 工作的单步调试

简介: SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍 - External Route 工作的单步调试

这个 Service 类 outline 如下图所示:


image.png


运行时打印:


image.png

这是 Spartacus 团队实现的 Routing Module:


image.png


在 init 阶段进行路由配置。


configure 放法的作用:使用 Spartacus routing config 增强原生的 Angular Routes 配置。只能被调用一次。


image.png

router.config 包含了 Spartacus 默认的路由配置和合作伙伴通过 provideConfig 传递的自定义配置:

image.png


遍历每个 route 记录,调用 configureRoutes 方法:


image.png


configureRoute 方法,负责设置 Route 的 path 和 matcher 属性。


image.png


Product detail 有一个专门的 matcher:


image.png

在 Angular 这种单页应用程序中,开发人员可以通过显示或隐藏与特定组件相对应的显示部分来更改用户所看到的内容,而不是去服务器获取新页面。 当用户执行应用程序任务时,他们需要在开发人员定义的不同视图之间移动。


要处理从一个视图到下一个视图的导航,可以使用 Angular 路由器。 路由器通过将浏览器 URL 解释为更改视图的指令来启用导航。


这个 function Location 指向的函数实现,负责决定 product/:productCode/:name 路由是否应当激活:


image.png

点击 cart 图标之后,准备判断加载 Spartacus 的 cart 页面,还是加载 Commerce Cloud Accelerator 的页面:


image.png

传进来的 route 参数:cart:


image.png

黄色部分为 url 判断函数体:


image.png


icludePatterns 和 excludePatterns 就是我们在 AppModule 里定义的配置:


image.png


matched 为 true:


image.png

image.png


准备重定向到 cart 页面去:

image.png


image.png



location 赋值为:electronics-spa/en/USD/cart


浏览器里新的 url:http://localhost:4000/electronics-spa/en/USD/


如果我们使用 CLI 加上 --routing flag 创建 Angular 应用,那么生成的 AppModule 里,会自动导入 AppRoutingModule:


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module'; // CLI imports AppRoutingModule
import { AppComponent } from './app.component';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule // CLI adds AppRoutingModule to the AppModule's imports array
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

window.location.href is not a method, it’s a property that will tell you the current URL location of the browser. Changing the value of the property will redirect the page.


更改 window.location.href 属性,会导致页面重定向。


而 window.open 会打开一个新窗口:


window.location.href = ‘http://www.google.com’; //Will take you to Google.


window.open() example: window.open(‘http://www.google.com’); //This will open Google in a new window.


angular 里的使用案例。



相关文章
|
5月前
|
搜索推荐 BI 开发者
sap.ui.comp.smarttable.SmartTable 组件 beforeRebindTable 事件的用法
sap.ui.comp.smarttable.SmartTable 组件 beforeRebindTable 事件的用法
|
5月前
|
网络架构 开发者 UED
Spartacus 2211 的 provideOutlet 方法扩展 UI
Spartacus 2211 的 provideOutlet 方法扩展 UI
Spartacus 2211 的 provideOutlet 方法扩展 UI
|
5月前
|
算法 API 开发者
【Qt UI相关】Qt中如何控制 窗口的最大化、最小化和关闭按钮?一文带你掌握用法
【Qt UI相关】Qt中如何控制 窗口的最大化、最小化和关闭按钮?一文带你掌握用法
853 1
|
5月前
|
存储 缓存 前端开发
关于 SAP Spartacus Optimization Engine 里的 cache 参数使用注意事项
关于 SAP Spartacus Optimization Engine 里的 cache 参数使用注意事项
|
5月前
|
JSON 开发者 数据格式
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
关于 SAP Spartacus LandingPage2Template 区域的 layout 设计实现
|
5月前
|
搜索推荐 开发者 UED
关于 SAP Spartacus 层的 UI 设计
关于 SAP Spartacus 层的 UI 设计
|
5月前
|
开发者 UED
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
SAP Spartacus BREAKPOINT 枚举类型在 Spartacus layout 实现中的作用
|
11月前
element-ui和element-plus的自定义列表格用法
element-ui和element-plus的自定义列表格用法
70 0
|
12月前
|
Shell 容器
SAP UI5 的 Unified Shell 发展历史和用法介绍试读版
SAP UI5 的 Unified Shell 发展历史和用法介绍试读版
SAP UI5 的 Unified Shell 发展历史和用法介绍试读版
|
12月前
【element-ui用法】el-radio-group默认选择和数据回显问题的解决方案
【element-ui用法】el-radio-group默认选择和数据回显问题的解决方案
576 0
下一篇
无影云桌面