SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍

这个 Service 类 outline 如下图所示:

SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍_第1张图片

运行时打印:
SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍_第2张图片

这是 Spartacus 团队实现的 Routing Module:

SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍_第3张图片

在 init 阶段进行路由配置。

configure 放法的作用:使用 Spartacus routing config 增强原生的 Angular Routes 配置。只能被调用一次。
SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍_第4张图片

router.config 包含了 Spartacus 默认的路由配置和合作伙伴通过 provideConfig 传递的自定义配置:
SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍_第5张图片

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

SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍_第6张图片

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

SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍_第7张图片

Product detail 有一个专门的 matcher:
SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍_第8张图片

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

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

这个 function Location 指向的函数实现,负责决定 product/:productCode/:name 路由是否应当激活:
SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍_第9张图片

点击 cart 图标之后,准备判断加载 Spartacus 的 cart 页面,还是加载 Commerce Cloud Accelerator 的页面:
SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍_第10张图片

传进来的 route 参数:cart
SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍_第11张图片

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

SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍_第12张图片

icludePatternsexcludePatterns 就是我们在 AppModule 里定义的配置:

SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍_第13张图片

matched 为 true:
SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍_第14张图片

SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍_第15张图片

准备重定向到 cart 页面去:

SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍_第16张图片

SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍_第17张图片

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

浏览器里新的 url:http://localhost:4000/electro...

如果我们使用 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 { }

你可能感兴趣的:(SAP 电商云 Spartacus UI UrlMatcherService 的用法介绍)