关于sap:SAP-Commerce-Cloud-Spartacus-UI-footer-区域的设计模型

54次阅读

共计 1610 个字符,预计需要花费 5 分钟才能阅读完成。

本文钻研如下图高亮所示的 SAP 电商云 Footer 区域的设计明细。

对应的 HTML markdup 入口:cx-footer-navigation:

cx-footer-navigation 只蕴含了一个独自的节点:cx-navigation-ui

第二行的 node$ 是具体的数据源。

footer slot 蕴含两个 Components:FooterNavigationComponent

对应的 Angular Component 实现名称:FooterNavigationComponent,其 selector 正是 cx-footer-navigation

这个 Component,应用了另一个 Angular Component:cx-navigation-ui,即 NavigationUIComponent

NavigationUIComponent 里又应用了 cx-generic-link.

这个 NavigationUIComponent 不仅被 footer 应用,在 my account 菜单也被应用。

数据源来自 node

三个 nav node:

node.children 开展的后果:

留神第 12 行 let 的用法。

简写模式:

<div *ngFor="let hero of heroes; let i=index; let odd=odd; trackBy: trackById" [class.odd]="odd">
  ({{i}}) {{hero.name}}
</div>

残缺模式:

<ng-template ngFor let-hero [ngForOf]="heroes" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
  <div [class.odd]="odd">({{i}}) {{hero.name}}</div>
</ng-template>

在这里,与 ngFor 构造指令相干的所有内容都实用于 \<ng-template\>。元素上的所有其余绑定和属性都实用于 \<ng-template> 中的 \<div> 元素。宿主元素上的其余修饰符,除了 ngFor 字符串,在元素在 \<ng-template\> 内挪动时放弃不变。在此示例中,[class.odd]=”odd” 保留在 \ <div\> 上。

let 关键字申明了一个模板输出变量,您能够在模板中援用该变量。此示例中的输出变量是 hero、i 和奇数。解析器将 let hero、let i 和 letodd 转换为名为 let-hero、let-i 和 let-odd 的变量。let-i 和 let-odd 变量变为 let i=index 和 let odd=odd。Angular 将 i 和 odd 设置为上下文 index 和 odd 属性的以后值。

nav 节点下有两层 cx-generic-link

NgForOf 提供了下列默认的 exported values

以递归形式渲染而成:

cx-footer-navigation 上面有三个 nav 节点。

谁调用 ( 生产 ) 的这个 selector?

没有更外层的 HTML wrapper 了:

阐明是 CMS 驱动。

footer navigation 打印出的 data:

footer area 打印出的数据:

2,2,4 的 length 正好和 footer 的理论内容吻合:

footer navigation Component 蕴含 footer content slot:

navigation nodes:Footer Pages

三个子节点,充分体现了 CMS 驱动的设计准则:

Twitter Link 是一个 Component,类型为 CMSLinkComponent:

对应的 Angular Component 名称为:LinkComponent

cx-link 也是 generic link 的消费者之一:

Twitter link 是一个 Component?

ID: FooterNavigationComponent


navigation node:Footer Pages

正文完
 0