天天看點

SAP 電商雲 Spartacus UI product 明細頁面的路由配置

如果直接通路如下 url:

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

SAP 電商雲 Spartacus UI product 明細頁面的路由配置

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

SAP 電商雲 Spartacus UI product 明細頁面的路由配置
SAP 電商雲 Spartacus UI product 明細頁面的路由配置

這個 cxRoute: ‘product’ 是哪裡維護的?

SAP 電商雲 Spartacus UI product 明細頁面的路由配置
SAP 電商雲 Spartacus UI product 明細頁面的路由配置

看這個高亮區域是從哪裡指派的?

SAP 電商雲 Spartacus UI product 明細頁面的路由配置

在 routing.module.js 裡,一個初始化鈎子:

SAP 電商雲 Spartacus UI product 明細頁面的路由配置

調試 35行這個 router 是如何被計算出來的即可:

SAP 電商雲 Spartacus UI product 明細頁面的路由配置

通過依賴注入完成的:

SAP 電商雲 Spartacus UI product 明細頁面的路由配置

根據如下關鍵字搜尋:cxRoute: 'product

SAP 電商雲 Spartacus UI product 明細頁面的路由配置

必須和 default-routing-config.ts 裡定義的這個 product 字元串的大小寫完全一緻:

SAP 電商雲 Spartacus UI product 明細頁面的路由配置
SAP 電商雲 Spartacus UI product 明細頁面的路由配置

最後發現了 product-details-page.module.ts 裡調用了 Angular 标準的路由 API:RouterModule.forChild

SAP 電商雲 Spartacus UI product 明細頁面的路由配置

component:路徑比對時執行個體化的元件。Spartacus UI 裡使用的是 PageLayoutComponent,這是一個 generic Component.

SAP 電商雲 Spartacus UI product 明細頁面的路由配置

data 屬性:ActivatedRoute 提供給元件的由開發人員定義的額外資料。預設情況下,不傳遞任何額外資料。

Spartacus UI 傳遞了 cxRoute: ‘product’ 作為額外屬性。

做個實驗,把 ProductDetailsPageModule 的路由配置裡的 cxRoute,改成 login:

SAP 電商雲 Spartacus UI product 明細頁面的路由配置
SAP 電商雲 Spartacus UI product 明細頁面的路由配置

路由就挂了:

SAP 電商雲 Spartacus UI product 明細頁面的路由配置

繼續閱讀