本文研究如下圖高亮所示的 SAP 電商云 Footer 區(qū)域的設(shè)計(jì)明細(xì)。

對(duì)應(yīng)的 HTML markdup 入口：cx-footer-navigation:

cx-footer-navigation 只包含了一個(gè)單獨(dú)的節(jié)點(diǎn)：cx-navigation-ui

第二行的 node$ 是具體的數(shù)據(jù)源。

footer slot 包含兩個(gè) Components：FooterNavigationComponent

對(duì)應(yīng)的 Angular Component 實(shí)現(xiàn)名稱：FooterNavigationComponent，其 selector 正是 cx-footer-navigation：

這個(gè) Component，使用了另一個(gè) Angular Component：cx-navigation-ui，即 NavigationUIComponent：

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

這個(gè) NavigationUIComponent 不僅被 footer 使用，在 my account 菜單也被使用。

數(shù)據(jù)源來(lái)自 node：

三個(gè) nav node:

是 node.children 展開(kāi)的結(jié)果：

注意第 12 行 let 的用法。

簡(jiǎn)寫(xiě)形式：

<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 結(jié)構(gòu)指令相關(guān)的所有內(nèi)容都適用于 <ng-template>。 元素上的所有其他綁定和屬性都適用于 <ng-template> 中的 <div> 元素。 宿主元素上的其他修飾符，除了 ngFor 字符串，在元素在 <ng-template> 內(nèi)移動(dòng)時(shí)保持不變。 在此示例中，[class.odd]=“odd” 保留在\ <div> 上。

let 關(guān)鍵字聲明了一個(gè)模板輸入變量，您可以在模板中引用該變量。 此示例中的輸入變量是 hero、i 和奇數(shù)。 解析器將 let hero、let i 和 letodd 轉(zhuǎn)換為名為 let-hero、let-i 和 let-odd 的變量。 let-i 和 let-odd 變量變?yōu)?let i=index 和 let odd=odd。 Angular 將 i 和 odd 設(shè)置為上下文index 和 odd 屬性的當(dāng)前值。

nav 節(jié)點(diǎn)下有兩層 cx-generic-link：

NgForOf 提供了下列默認(rèn)的 exported values：

以遞歸方式渲染而成：

cx-footer-navigation 下面有三個(gè) nav 節(jié)點(diǎn)。

誰(shuí)調(diào)用(消費(fèi))的這個(gè) selector？

沒(méi)有更外層的 HTML wrapper 了：

說(shuō)明是 CMS 驅(qū)動(dòng)。

footer navigation 打印出的 data：

footer area 打印出的數(shù)據(jù)：

2，2，4 的 length 正好和 footer 的實(shí)際內(nèi)容吻合：

footer navigation Component 包含 footer content slot：

navigation nodes：Footer Pages

三個(gè)子節(jié)點(diǎn)，充分體現(xiàn)了 CMS 驅(qū)動(dòng)的設(shè)計(jì)原則：

Twitter Link 是一個(gè) Component，類(lèi)型為 CMSLinkComponent：

對(duì)應(yīng)的 Angular Component 名稱為：LinkComponent

cx-link 也是 generic link 的消費(fèi)者之一：

Twitter link 是一個(gè) Component？

ID: FooterNavigationComponent

navigation node：Footer Pages

總結(jié)

以上是生活随笔為你收集整理的SAP Commerce Cloud Spartacus UI footer 区域的设计模型的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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