SAPCommerceCloudSpartacusUI页脚区域的设计模型

时间：2023-04-01 18:18:04 Java

本文研究下图高亮显示的SAPE-commerceCloudFooter区域的设计细节。对应的HTMLmarkdup条目：cx-footer-navigation:cx-footer-navigation只包含一个节点：cx-navigation-ui第二行的node$是具体的数据源。Footerslot包含两个Components：FooterNavigationComponent对应的AngularComponent实现名称：FooterNavigationComponent，它的selector是cx-footer-navigation：这个Component使用了另一个AngularComponent：cx-navigation-ui，也就是NavigationUIComponent：NavigationUIComponent也使用了Addedcx-generic-关联。这个NavigationUIComponent不仅被footer用到了，我的账号菜单也用到了。数据源来自node：三个nav节点：node.children展开的结果：注意第12行let的用法。缩写形式：({{i}}){{hero.name}}

完整形式：({{i}}){{hero.name}}

在这里，与ngFor结构指令相关的所有内容都适用于\.元素上的所有其他绑定和属性都适用于\中的\

元素。当元素在\中移动时，宿主元素上的其他修饰符（ngFor字符串除外）保持不变。在此示例中，[class.odd]="odd"保留在\上。let关键字声明一个模板输入变量，您可以在模板中引用该变量。本例中的输入变量是hero、i和odd。解析器将lethero、leti和letodd转换为名为let-hero、let-i和let-odd的变量。let-i和let-odd变量变为leti=index和letodd=odd。Angular将i和odd设置为上下文的index和odd属性的当前值。nav节点下有两层cx-generic-link：NgForOf提供以下默认导出值：递归渲染：cx-footer-navigation下有三个nav节点。谁调用（消费）这个选择器？没有外部HTML包装器：描述由CMS驱动。footernavigation打印的数据：footerarea打印的数据：2、2、4的长度与footer实际内容重合：footernavigationComponent包含footercontentslot的三个子节点：navigationnodes：FooterPages，充分体现了CMSDriven的设计原则：TwitterLink是一个Component，类型是CMSLinkComponent：对应的AngularComponent名称是：LinkComponentcx-link也是通用链接的消费者之一：Twitterlink是一个Component？ID:FooterNavigationComponent导航节点:FooterPages

上一篇：【Java面试】SpringIoC的工作流程介绍

下一篇：SpringBootServerless实战系列《部署》-商城应用简介

SAPCommerceCloudSpartacusUI页脚区域的设计模型相关文章