本文研究如下圖高亮所示的 SAP 電商雲 Footer 區域的設計明細。

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/e1ae7a91751440b6bfddbafbaa56e006.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGq5a2Q54aZ,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

對應的 HTML markdup 入口：`cx-footer-navigation`:

![](https://img-blog.csdnimg.cn/img_convert/d2990ce2368021ad60c6fb71c74fe8d8.png)

cx-footer-navigation 只包含了一個單獨的節點：`cx-navigation-ui`

![](https://img-blog.csdnimg.cn/img_convert/df7bf10138c2db38169759084f5d2dfa.png)

第二行的 `node$` 是具體的資料來源。

![](https://img-blog.csdnimg.cn/img_convert/c5610f43009832da49f7a8241b452fb7.png)

footer slot 包含兩個 Components：`FooterNavigationComponent`

![](https://img-blog.csdnimg.cn/img_convert/9b0c800f74a82267330ecfe61cadd19f.png)

對應的 Angular Component 實現名稱：`FooterNavigationComponent`，其 selector 正是 `cx-footer-navigation`：

![](https://img-blog.csdnimg.cn/img_convert/29bb381ed06f9bfa2d65a149d3ca91de.png)

這個 Component，使用了另一個 Angular Component：cx-navigation-ui，即 `NavigationUIComponent`：

![](https://img-blog.csdnimg.cn/img_convert/ce645290bd9c6f0194a0ae6cae9e3cad.png)

NavigationUIComponent 裡又使用了 `cx-generic-link`.

這個 NavigationUIComponent 不僅被 footer 使用，在 my account 選單也被使用。

![](https://img-blog.csdnimg.cn/img_convert/793f499d07cfafdac18ee0f196a2e76a.png)

資料來源來自 `node`：

![](https://img-blog.csdnimg.cn/img_convert/955301db6fd833e29d2ed3dcd8b19d7a.png)

三個 nav node:
![](https://img-blog.csdnimg.cn/img_convert/779fae57aa0e2689549d8f9ccf8f841a.png)

是 `node.children` 展開的結果：

![](https://img-blog.csdnimg.cn/img_convert/cf12e6eae83f966d12bf705380b377ea.png)

注意第 12 行 let 的用法。

簡寫形式：

```html
<div hero="" of="" heroes="" let="" i="index;" odd="odd;" trackby:="" trackbyid="">
  ({{i}}) {{hero.name}}
</div>
```

完整形式：

```html
<ng-template ngfor="" let-hero="" let-i="index" let-odd="odd">
  <div>({{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`：

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/7063343955ae49e29fadde8af76bde86.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGq5a2Q54aZ,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

NgForOf 提供了下列預設的 `exported values`：

![](https://img-blog.csdnimg.cn/img_convert/1836586c53f28b45146ba1da3945b794.png)

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/43a4a460a0c64a1695caedc9e642cbb6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGq5a2Q54aZ,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

以遞迴方式渲染而成：

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/ea8733dc488f4644b6a2af3161ea5572.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGq5a2Q54aZ,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

cx-footer-navigation 下面有三個 nav 節點。

誰呼叫(`消費`)的這個 selector？

沒有更外層的 HTML wrapper 了：

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/b8defbf3302746a8ad372a38018efa2e.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGq5a2Q54aZ,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

說明是 CMS 驅動。

footer navigation 列印出的 data：
![](https://img-blog.csdnimg.cn/img_convert/bc925339c1aa506557fb324fe6340c6c.png)

footer area 列印出的資料：
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/603987eb24b3461ebca7f43088825ae3.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGq5a2Q54aZ,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

2，2，4 的 length 正好和 footer 的實際內容吻合：

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/9fb290839fc04c26a986d7845e2f5387.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGq5a2Q54aZ,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

footer navigation Component 包含 footer content slot：
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/e22c800bbc0b4f36b407d5f557ab21c6.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGq5a2Q54aZ,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

navigation nodes：`Footer Pages`

![](https://img-blog.csdnimg.cn/img_convert/d2d80ec307667160f91df4ddcda96a3e.png)

三個子節點，充分體現了 CMS 驅動的設計原則：
![](https://img-blog.csdnimg.cn/img_convert/a6ac50b8202f744baafb08a9d4a9bfae.png)

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/53c86a8ee0904948b01b0fa924610a52.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGq5a2Q54aZ,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

Twitter Link 是一個 Component，型別為 CMSLinkComponent：

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/018b79266c6444deb5f6198f961088e9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGq5a2Q54aZ,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

對應的 Angular Component 名稱為：`LinkComponent`

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/444ab417407b4238a1bb1045567e7f23.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGq5a2Q54aZ,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

![](https://img-blog.csdnimg.cn/img_convert/e259306047631302010b27f910245da8.png)

cx-link 也是 generic link 的消費者之一：

![](https://img-blog.csdnimg.cn/img_convert/d2514b261ace8c1410c607801b622eea.png)

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/9d2dac98998343cc8291aabbfe1d3353.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGq5a2Q54aZ,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

Twitter link 是一個 Component？
![](https://img-blog.csdnimg.cn/img_convert/0da30af6c1e619a20a15cf616cf9ae91.png)

ID: FooterNavigationComponent

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/a55903ae4baa4f7e85ad961477f5d590.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGq5a2Q54aZ,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
![在這裡插入圖片描述](https://img-blog.csdnimg.cn/15afc322bfb147ffa9a3af3fefb08525.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGq5a2Q54aZ,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)

navigation node：Footer Pages

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/8b5f80b2be684e62a5e4c02654d564b8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5rGq5a2Q54aZ,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
                        </div>
                                        <p style="clear:both;"></p>
                    <p class="translate">
                                                    來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/24475491/viewspace-2856678/，如需轉載，請註明出處，否則將追究法律責任。
                                            </p>

</ng-template></div>
            </ng-template></ng-template>

SAP Commerce Cloud Spartacus UI footer 區域的設計模型

相關文章