天天看點

SAP Spartacus B2B 頁面 Disable 按鈕的顯示原理

SAP Spartacus B2B 頁面 disable 按鈕如下圖所示。

這個高亮的 disable 按鈕,和左邊相鄰的 Edit 按鈕,實作位于不同的 Component.

SAP Spartacus B2B 頁面 Disable 按鈕的顯示原理

disable 按鈕有單獨的實作 Component:toggle-status.component.ts, selector: cx-org-toggle-status

SAP Spartacus B2B 頁面 Disable 按鈕的顯示原理

在 B2B Launchpad 6 個 tile 裡都消費了該 Component,以 unit 頁面為例,消費代碼如下:

SAP Spartacus B2B 頁面 Disable 按鈕的顯示原理
SAP Spartacus B2B 頁面 Disable 按鈕的顯示原理

其中 18 行的 key,19 行的 i18nRoot, 都是為了給該 Component 的 @input 屬性傳遞輸入值:

SAP Spartacus B2B 頁面 Disable 按鈕的顯示原理

而 17 行的屬性 actions,我們試着把這個值改一改,看會發生什麼:

SAP Spartacus B2B 頁面 Disable 按鈕的顯示原理

不出所料,Disable 按鈕從工具欄裡消失了:

SAP Spartacus B2B 頁面 Disable 按鈕的顯示原理

根據關鍵字 select="[actions]" 搜尋,能發現 card.component.html 模闆實作裡,通過 ng-content 實作了動态内容注入,注入條件是那些包含了 actions 屬性的标簽。

SAP Spartacus B2B 頁面 Disable 按鈕的顯示原理

是以,包含了 Disable 按鈕的 Component,其屬性值必須是 actions,隻有這樣,才能被動态注入到 card.component.html 的 header 區域去。

SAP Spartacus B2B 頁面 Disable 按鈕的顯示原理

繼續閱讀