源代碼：

現在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 如何创建的的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。