天天看點

SAP Spartacus Storefront 頁面 cx-page-layout 的指派邏輯

分别是header,navigation和footer:

SAP Spartacus Storefront 頁面 cx-page-layout 的指派邏輯

對應的 Component 實作裡,有對應的 set 方法:

SAP Spartacus Storefront 頁面 cx-page-layout 的指派邏輯

section$ 是一個 BehaviorSubject.

其中每個section裡包含的slots,定義在檔案layout-config.ts裡:

SAP Spartacus Storefront 頁面 cx-page-layout 的指派邏輯

運作時列印的輸出:

SAP Spartacus Storefront 頁面 cx-page-layout 的指派邏輯

Storefront.component.html的cx-page-layout design time:

SAP Spartacus Storefront 頁面 cx-page-layout 的指派邏輯

運作時的callstack:

SAP Spartacus Storefront 頁面 cx-page-layout 的指派邏輯

這個section有@Input注解:

Decorator that marks a class field as an input property and supplies configuration metadata. The input property is bound to a DOM property in the template. During change detection, Angular automatically updates the data property with the DOM property’s value.

該input property綁定到DOM property,其值來自DOM元素的對應屬性。

SAP Spartacus Storefront 頁面 cx-page-layout 的指派邏輯

section$是一個BehaviorSubject,通過next函數将section的值傳遞給其他subscriber:

SAP Spartacus Storefront 頁面 cx-page-layout 的指派邏輯

繼續閱讀