天天看點

SAP 電商雲 Spartacus UI 産品明細頁面路由路徑的自定義配置

如下圖所示,為了減少 SAP 電商雲 Spartacus 客戶實施時不必要的配置,Spartacus 将不少頁面的路由路徑的預設配置,定義在如下的 default-routing-config.ts 檔案裡:

SAP 電商雲 Spartacus UI 産品明細頁面路由路徑的自定義配置

修改之後,産品明細頁面和 homepage 的産品超連結都一齊變更了:

SAP 電商雲 Spartacus UI 産品明細頁面路由路徑的自定義配置
SAP 電商雲 Spartacus UI 産品明細頁面路由路徑的自定義配置
SAP 電商雲 Spartacus UI 産品明細頁面路由路徑的自定義配置

這個預設配置什麼時候被讀取,并且如何被解析的呢?

如果僅僅按照 product 作為關鍵字搜尋,那麼比對結果太多了,因為這個單詞太 generic 了:

SAP 電商雲 Spartacus UI 産品明細頁面路由路徑的自定義配置
SAP 電商雲 Spartacus UI 産品明細頁面路由路徑的自定義配置

而且 RoutesConfig 這個類型,多半都是被代碼動态解析的。

換個思路,把 product 改成 product2,看看會不會報錯:

SAP 電商雲 Spartacus UI 産品明細頁面路由路徑的自定義配置
SAP 電商雲 Spartacus UI 産品明細頁面路由路徑的自定義配置

這回尴尬了,滑鼠放上去,顯示的 url 指向 home 連結,說明 product 明細頁面的 url 根本就沒有生成,這條路也行不通。

再根據 paramsMapping 搜尋,因為我們的代碼,肯定在某處,會解析這個字段:

SAP 電商雲 Spartacus UI 産品明細頁面路由路徑的自定義配置

果然,就在 semantic-path.service.ts 裡:

SAP 電商雲 Spartacus UI 産品明細頁面路由路徑的自定義配置
SAP 電商雲 Spartacus UI 産品明細頁面路由路徑的自定義配置

在 semantic-path.service.ts 裡添加如下列印語句:

SAP 電商雲 Spartacus UI 産品明細頁面路由路徑的自定義配置
SAP 電商雲 Spartacus UI 産品明細頁面路由路徑的自定義配置

我們看下第一行輸出,這個 / 和 login 是怎麼被解析的。

在 Login.componment.html 裡有個 pipe:

SAP 電商雲 Spartacus UI 産品明細頁面路由路徑的自定義配置
SAP 電商雲 Spartacus UI 産品明細頁面路由路徑的自定義配置

遇到下面這行代碼:

SAP 電商雲 Spartacus UI 産品明細頁面路由路徑的自定義配置

就會讀取 Spartacus 裡的配置,把基于語義的路由配置,轉換成 url.

從 routingConfigService 裡讀取配置:

SAP 電商雲 Spartacus UI 産品明細頁面路由路徑的自定義配置

login 頁面 url 搞清楚了,那麼 product 頁面呢?

奇怪,如果直接通路如下 url:

http://localhost:4200/powertools-spa/en/USD/jerryproduct/3881018/Angle%20Grinder%20RT-AG%20115

SAP 電商雲 Spartacus UI 産品明細頁面路由路徑的自定義配置

頁面打開後,沒有看到和 product 相關的執行邏輯:

SAP 電商雲 Spartacus UI 産品明細頁面路由路徑的自定義配置

那麼 Spartacus 怎麼知道要加載 product 明細頁面呢?

我們後續的文章會分享。

繼續閱讀