One step debugging of dynamic creation of SAP e-commerce cloud Spartacus UI angular component

Time:2021-12-22

Jerry’s previous articlesConcept and development overview of container components in SAP product UIAs mentioned, SAP Spartacus angular component is rendered through the instruction cxcomponentwrapper customized by our development team.

One step debugging of dynamic creation of SAP e-commerce cloud Spartacus UI angular component

At runtime, according to the name of the angular component, that is, the quickordercomponent contained in the flextype field on line 90, we can use the dynamic creation API of the angular component to trigger the rendering of this component.

One step debugging of dynamic creation of SAP e-commerce cloud Spartacus UI angular component

One step debugging of dynamic creation of SAP e-commerce cloud Spartacus UI angular component

default-component. handler. TS, call the createcomponent method of viewcontainerref to create a component instance.
One step debugging of dynamic creation of SAP e-commerce cloud Spartacus UI angular component

For the component to be created, if external dependencies are defined in the constructor, the creation and injection of these dependencies need to be completed:
One step debugging of dynamic creation of SAP e-commerce cloud Spartacus UI angular component

The token to be injected here is quickorderfacade:
One step debugging of dynamic creation of SAP e-commerce cloud Spartacus UI angular component

The provider parsed here is quickorderservice:
One step debugging of dynamic creation of SAP e-commerce cloud Spartacus UI angular component

Once the coremodule is loaded, the provider definition in facade providers in line 6 of the following figure will take effect immediately:

One step debugging of dynamic creation of SAP e-commerce cloud Spartacus UI angular component

In other words, at runtime, quickorderservice will become the specific implementation of quickorderfacade:

One step debugging of dynamic creation of SAP e-commerce cloud Spartacus UI angular component

One step debugging of dynamic creation of SAP e-commerce cloud Spartacus UI angular component

More Jerry’s original articles are: “Wang Zixi”:
One step debugging of dynamic creation of SAP e-commerce cloud Spartacus UI angular component