SAP Spartacus Component-wrapper.directive.ts launch Component的三個引數

阿新 • • 發佈：2020-10-09

拿到Component mapping後，使用subscribe fire this.launchComponent這個方法：

launcher的三個輸入引數：

componentMapping
viewContainerRef
elementInjector

首先根據injector和Component型別(字串)拿到Component factory：

再使用viewContainerRef建立Component：

將建立好的Component ref通過next傳遞給下一個subscription(subscribe方法內部的next方法)：

要獲取更多Jerry的原創文章，請關注公眾號"汪子熙":

SAP Spartacus Component-wrapper.directive.ts launch Component的三個引數

拿到Component mapping後，使用subscribe fire this.launchComponent這個方法： launcher的三個輸入引數：

SAP Spartacus 如何重定義登入 Login Component

首先在一個標準的 Storefront 上，找到該 Component 的 selector 找到其 Component 名稱：LoginComponent

Angular 事件繫結語法在 SAP Spartacus Popover Component 中的一個應用

要繫結到事件，請使用 Angular 的事件繫結語法。此語法由等號左側括號內的目標事件名和右側引號內的模板語句組成。在下面的示例中，目標事件名是 click ，模板語句是 onSave() 。

Subject 在 SAP Spartacus Popover Component 中的應用

Subject 是 Rxjs 裡的一個工具物件。 Subject 是一種特殊型別的 Observable，它允許將值多播到許多觀察者。 Subject 就像 EventEmitters。

SAP Spartacus載入網路請求的entity狀態切換，統一在loader.reducer.ts裡完成

page-data.reducer.ts: 這裡可以監控載入成功的CMS page： ngrx-store.js： loader.reducer.ts裡，將entity的loading置為false：

SAP Spartacus裡的injector

呼叫Angular core的Injector.create: getCmsData返回的也只是一個Observable：以下都是Angular core的實現：

控制SAP Spartacus shipping address頁面spinner顯示的邏輯

直接檢視頁面原始檔shipping-address.component.html: 為簡單起見，本文只討論isLoading$這個引數：型別為boolean的Observable物件

SAP Spartacus checkout階段顯示spinner與否的準則

at every step, we’re not displaying a spinner because of next We display a spinner because the data to load a component still needs to be loaded. For example, when you gt into payment detai

SAP Spartacus載入delivery國家列表的處理邏輯

user-address.service.ts裡的loadRegions： this.store.dispatch(new UserActions.LoadRegions(countryIsoCode)); 比如CN：

SAP Spartacus載入delivery region的實現

user-address.service.ts裡的loadRegions： this.store.dispatch(new UserActions.LoadRegions(countryIsoCode)); 比如CN：

SAP Spartacus delivery mode continue button單元測試失敗原因分析

原因在於continue button被設定成了disabled，因此無法點選：因此需要研究這個button預設的enable狀態：

命令列裡對SAP Spartacus執行命令ng test core

ng test core: “C:\\app\\node-v12.18.3-win-x64\\node.exe” “C:\\app\\node-v12.18.3-win-x64\\[email protected]\\cli\\bin\\ng” t

群裡有朋友關於SAP Spartacus的疑問

Spartacus就是大家現在看到的，b2c電商前臺頁面，end user購物用的網頁。以前的Hybris storefront是jsp開發的，使用者體驗很不好，而且和Hybris產品耦合在一起，客戶一旦實施完成後，就沒法升Hybris的版本了

SAP Spartacus全域性配置裡和路由Route相關的配置

在configuration.service.ts裡檢視config物件：展開routing欄位：所有路由配置資訊都在裡面：

SAP Spartacus 中的 checkout(結帳) 設計

https://sap.github.io/spartacus-docs/extending-checkout The checkout feature in Spartacus is CMS-driven, which means every page in the checkout flow is based on CMS pages, slots and components.