這個(gè)彈出窗口的技術(shù)實(shí)現(xiàn)，通過SAP Spartacus 自定義的popover Component實(shí)現(xiàn)而成：

注意，當(dāng)我剛接觸Angular時(shí)，誤以為下圖標(biāo)號(hào)為1的a標(biāo)簽，和標(biāo)號(hào)為2的自定義標(biāo)簽cx-org-toggle-status, 會(huì)按照其在unit-details.component.html里出現(xiàn)的先后順序，出現(xiàn)在最終的頁面里。

實(shí)際上，我這種理解是錯(cuò)誤的。

SAP Spartacus B2B 頁面如下圖右邊高亮區(qū)域所示，技術(shù)上實(shí)現(xiàn)在cx-org-card 選擇器對(duì)應(yīng)的CardComponent里：

Card的layout即布局設(shè)置，實(shí)現(xiàn)在card.component.html里：

其中class為actions的div標(biāo)簽，作為一個(gè)place holder，容納所有消費(fèi)CardComponent selector, 即cx-org-card時(shí)傳入的包含屬性actions的DOM元素。

這種動(dòng)態(tài)注入元素的機(jī)制，通過下列語句完成，稱為content projection:

ng-content select="[actions]"

也就是說：下圖標(biāo)號(hào)為1的a標(biāo)簽，和標(biāo)號(hào)為2的cx-org-toggle-status標(biāo)簽頁，因?yàn)槎紟в衋ctions的屬性：

因此運(yùn)行時(shí)，會(huì)出現(xiàn)在下圖標(biāo)號(hào)為1，class為actions的div元素里。

因此，我只需要在CardComponent的template實(shí)現(xiàn)，即card.component.html里，聲明cxPopover, 這樣所有消費(fèi)了CardComponent selector cx-org-card 的應(yīng)用Component，都能夠自動(dòng)看到 (i) icon, 而不用在Spartacus B2B 的 6個(gè) Details Component里，重復(fù)聲明 cxPopOver了。

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的SAP Spartacus B2B 页面信息提示图标的弹出窗口显示实现逻辑的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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