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

We have introduced before that the Component property of the route data structure of the routes array after the SAP Spartacus routing configuration all points to the generic PageLayoutComponent. Then how does the latter know which Angular Component data should be loaded?

Let's first look at which templates call the selector of PageLayoutComponent:

There are only three places:

There are four places at runtime, which is not surprising, because the product detail page is loaded through routing, so it appears under router-outlet.

Adding a print statement in its constructor is of no avail, because all the fields of this Component are of Observable type and can only be seen after subscribe.

So I set a breakpoint on its @input field:

The rendering trigger point is cxOutlet on line 2, which triggers the creation of cx-page-layout Component on line 10:

After the Component instance (ie PageLayoutComponent) is created, assign a value to its input property:

The assignment in the above figure will trigger the execution of the 14th line of the following figure.

section$ is a subject, and its next logic is to traverse its listener and notify one by one:

When the template file async pipe is executed, the execution of Observable is triggered:

According to page, section and breakpoint, get the slots in the section:

The key of layoutslot is page template:

There is no section named header in this page template:

So we fallback to the global configuration to get the slot configuration of the header:

getResponsiveSlotConfig：

First, see if there is a configuration specifically set for xl in layoutConfig, and found that there is no, only lg:

Just find the one closest to xl, the answer is lg:

Now you know: The header area of the LandingPage2Template template should display the following slots:

More original articles by Jerry, all in: "Wang Zixi":