How does SAP Spartacus pagelayoutcomponent know what specific content it should display

Time:2022-1-23

As we mentioned before, the component attribute of the route data structure of the routes array configured by SAP Spartacus all points to the generic pagelayoutcomponent. How can the latter know which angular component data they should load?

How does SAP Spartacus pagelayoutcomponent know what specific content it should display

Let’s first look at which templates call the pagelayoutcomponent selector:
How does SAP Spartacus pagelayoutcomponent know what specific content it should display

There are only three:
How does SAP Spartacus pagelayoutcomponent know what specific content it should display

This is not surprising because the product details page is loaded through routing, so it appears under the router outlet.

How does SAP Spartacus pagelayoutcomponent know what specific content it should display

It is useless to add a print statement to its constructor, because all fields of this component are of observable type and can only be seen after subscribing.

How does SAP Spartacus pagelayoutcomponent know what specific content it should display

So I set a breakpoint on its @ input field:

How does SAP Spartacus pagelayoutcomponent know what specific content it should display

How does SAP Spartacus pagelayoutcomponent know what specific content it should display

The rendering trigger point is the cxoutlet in line 2, which triggers the creation of the CX page layout component in line 10:

How does SAP Spartacus pagelayoutcomponent know what specific content it should display

After the component instance (i.e. pagelayoutcomponent) is created, assign a value to its input attribute:
How does SAP Spartacus pagelayoutcomponent know what specific content it should display

The assignment in the figure above will trigger the code execution in line 14 in the figure below.

How does SAP Spartacus pagelayoutcomponent know what specific content it should display

Section $is a subject, and its next logic is to traverse its listener and notify one by one:
How does SAP Spartacus pagelayoutcomponent know what specific content it should display

When the template file async pipe is executed, the observable execution is triggered:
How does SAP Spartacus pagelayoutcomponent know what specific content it should display

How does SAP Spartacus pagelayoutcomponent know what specific content it should display

According to page, section and breakpoint, get the slots in the section:
How does SAP Spartacus pagelayoutcomponent know what specific content it should display

The key of layoutslot is page template:
How does SAP Spartacus pagelayoutcomponent know what specific content it should display

How does SAP Spartacus pagelayoutcomponent know what specific content it should display

There is no section named header in this page template:
How does SAP Spartacus pagelayoutcomponent know what specific content it should display

So we fallback to the global configuration to get the slot configuration of the header:
How does SAP Spartacus pagelayoutcomponent know what specific content it should display

getResponsiveSlotConfig:
How does SAP Spartacus pagelayoutcomponent know what specific content it should display

First, check whether there is a configuration specifically set for XL in layoutconfig. It is found that there is no configuration, only LG:
How does SAP Spartacus pagelayoutcomponent know what specific content it should display

Find the one closest to XL. The answer is LG:
How does SAP Spartacus pagelayoutcomponent know what specific content it should display

Now you know that the following slots should be displayed in the header area of the landingpage2template template:

How does SAP Spartacus pagelayoutcomponent know what specific content it should display

More Jerry’s original articles are: “Wang Zixi”:
How does SAP Spartacus pagelayoutcomponent know what specific content it should display