SAP Spartacus storefront.component.html 里的 SkipLinkComponent 如何创建的

源代码：

现在cxOutlet的值是字符串cx-storefront:

运行时触发ngOnChanges hook：

然后之行到 cx-header 的 outlet 解析:

从注释看，render方法正是负责挂接到指定 outlet position 的 Component 的渲染：

cx-storefront 和 header 之间的这个 cx-skip-link 是哪里生成的？

源代码里，这两个 node 之间根本没有 cx-skip-link!

这里解释了，html 里我们如果定义了 ng-template，在运行时，会自动为其创建一个 container：

/*** Creates an LContainer for an ng-template (dynamically-inserted view), e.g.** <ng-template #foo>*    <div></div>* </ng-template>** @param index The index of the container in the data array* @param templateFn Inline template* @param decls The number of nodes, local refs, and pipes for this template* @param vars The number of bindings for this template* @param tagName The name of the container element, if applicable* @param attrsIndex Index of template attributes in the `consts` array.* @param localRefs Index of the local references in the `consts` array.* @param localRefExtractor A function which extracts local-refs values from the template.*        Defaults to the current element associated with the local-ref.** @codeGenApi*/
function ɵɵtemplate(index, templateFn, decls, vars, tagName, attrsIndex, localRefsIndex, localRefExtractor) {const lView = getLView();const tView = getTView();const adjustedIndex = index + HEADER_OFFSET;const tNode = tView.firstCreatePass ? templateFirstCreatePass(adjustedIndex, tView, lView, templateFn, decls, vars, tagName, attrsIndex, localRefsIndex) :tView.data[adjustedIndex];setCurrentTNode(tNode, false);const comment = lView[RENDERER].createComment(ngDevMode ? 'container' : '');appendChild(tView, lView, comment, tNode);attachPatchData(comment, lView);addToViewTree(lView, lView[adjustedIndex] = createLContainer(comment, lView, comment, tNode));if (isDirectiveHost(tNode)) {createDirectivesInstances(tView, lView, tNode);}if (localRefsIndex != null) {saveResolvedLocalsInData(lView, tNode, localRefExtractor);}
}

这个 create 方法是 outlet Directive 里唯一有可能渲染 view 的地方了：

准备创建 SkipLinkComponent：

这个 SkipLinkComponent 是注册在outlet.service.ts里的：

在这里完成的注册，通过 initializer 方式，把SkipLinkComponent，注册到 cx-storefront 的before位置：

view container reference 的 createComponent方法，最后会触发待创建 Component 的构造函数执行，通过 SkipLinkComponent_Factory作为桥梁：

更多Jerry的原创文章，尽在：“汪子熙”:

SAP Spartacus storefront.component.html 里的 SkipLinkComponent 如何创建的相关推荐

SAP Spartacus storefront.component.html 怎么关联到其他的页面
storefront怎么关联到其他的页面? 下图是storefront.component.html的源代码,里面使用自定义Component cx-page-layout和cx-page-slot, ...
SAP Spartacus Breadcrumbs Component的显示问题讨论
如果把Storefront.component.html里position为BottomHeaderSlot改成其他名称: 按照其注释写到: position是用于为指定的page slot定位CMS ...
通过 SAP Spartacus 的 Component 映射机制，更改默认购物车 Cart 页面
Spartacus默认的购物车界面: https://github.com/SAP/spartacus-bootcamp/blob/master/sparta0/src/app/components/ ...
以 library 方式启动的 SAP Spartacus Storefront，如何手动实现 User 模块的延迟加载
首先了解 SAP Spartacus Storefront 是如何导入 feature module 的.本文写作版本:Spartacus-core:3.4.1 AppModule->Spart ...
如何替换SAP Spartacus启动Component -app-root
在SAP Spartacus app.module.ts里,随便定义一个简单的Component: @Component({selector: "app-root",templat ...
SAP Spartacus cms-components.service.ts里的config.cmsComponents
// we use defer, to be sure the logic below used to compose final observable// will be executed at s ...
SAP ＭＭ公司间STO里的交货单自动创建？
SAP MM公司间STO里的交货单自动创建? SAP标准系统里,公司间STO的后续外向交货单,是可以通过后台配置的方式自动创建的,即ME21N创建好公司间STO单据的同时,自动触发交货单. 本文就是简 ...
如何给 SAP Spartacus Storefront 创建新的页面
page template 不包含 layout 或者 design information. content slot 在页面上的具体位置,以及 layout 和 design 的选择,必须在前端指 ...
SAP Spartacus cost-center.config.ts里定义的路由常量，是如何被加载的
文件地址:feature-libs\organization\administration\components\cost-center\cost-center.config.ts module id ...

SAP Spartacus storefront.component.html 里的 SkipLinkComponent 如何创建的

SAP Spartacus storefront.component.html 里的 SkipLinkComponent 如何创建的相关推荐

最新文章

热门文章