下圖storefront.component.html的語(yǔ)義：

將字符串header賦給cx-page-layout selector對(duì)應(yīng)的Angular Component：

/*** Creates an empty element using {@link elementStart} and {@link elementEnd}* Jerry：使用??elementStart 創(chuàng)建一個(gè)空的自定義標(biāo)簽, 即 DOM node，這個(gè)例子里就是 cx-page-layout * @param index Index of the element in the data array* @param name Name of the DOM Node* @param attrsIndex Index of the element's attributes in the `consts` array.* @param localRefsIndex Index of the element's local references in the `consts` array.** @codeGenApi*/ function ??element(index, name, attrsIndex, localRefsIndex) {??elementStart(index, name, attrsIndex, localRefsIndex);??elementEnd(); }

elementStart負(fù)責(zé)創(chuàng)建dom元素：

/*** Create DOM element. The instruction must later be followed by `elementEnd()` call.** @param index Index of the element in the LView array* @param name Name of the DOM Node* @param attrsIndex Index of the element's attributes in the `consts` array.* @param localRefsIndex Index of the element's local references in the `consts` array.** Attributes and localRefs are passed as an array of strings where elements with an even index* hold an attribute name and elements with an odd index hold an attribute value, ex.:* ['id', 'warning5', 'class', 'alert']** @codeGenApi*/ function ??elementStart(index, name, attrsIndex, localRefsIndex) {const lView = getLView();const tView = getTView();const adjustedIndex = HEADER_OFFSET + index;ngDevMode &&assertEqual(getBindingIndex(), tView.bindingStartIndex, 'elements should be created before any bindings');ngDevMode && ngDevMode.rendererCreateElement++;ngDevMode && assertIndexInRange(lView, adjustedIndex);const renderer = lView[RENDERER];const native = lView[adjustedIndex] = elementCreate(name, renderer, getNamespace());const tNode = tView.firstCreatePass ?elementStartFirstCreatePass(index, tView, lView, native, name, attrsIndex, localRefsIndex) :tView.data[adjustedIndex];setPreviousOrParentTNode(tNode, true);const mergedAttrs = tNode.mergedAttrs;if (mergedAttrs !== null) {setUpAttributes(renderer, native, mergedAttrs);}const classes = tNode.classes;if (classes !== null) {writeDirectClass(renderer, native, classes);}const styles = tNode.styles;if (styles !== null) {writeDirectStyle(renderer, native, styles);}appendChild(tView, lView, native, tNode);// any immediate children of a component or template container must be pre-emptively// monkey-patched with the component view data so that the element can be inspected// later on using any element discovery utility methods (see `element_discovery.ts`)if (getElementDepthCount() === 0) {attachPatchData(native, lView);}increaseElementDepthCount();if (isDirectiveHost(tNode)) {createDirectivesInstances(tView, lView, tNode);executeContentQueries(tView, tNode, lView);}if (localRefsIndex !== null) {saveResolvedLocalsInData(lView, tNode);} }

Instantiate all the directives that were previously resolved on the current node

在這里進(jìn)行的賦值：

最后的結(jié)果，調(diào)用Component的set方法：

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的SAP Spartacus cx-page-layout 属性运行时的赋值原理, set 是如何被框架调用的？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。