cxOutlet合集

• SAP Spartacus自定義指令cxOutlet的工作原理

• SAP Spartacus table cell如何通過(guò)cxOutlet在運(yùn)行時(shí)動(dòng)態(tài)注入組件

• SAP Spartacus 重用組件cx-table的設(shè)計(jì)原理

• SAP Spartacus cxOutlet里的templatesRefs的填充邏輯

• SAP Spartacus cxOutlet里的元數(shù)據(jù)存儲(chǔ)，outlet名稱和待渲染Component的映射關(guān)系

SAP Spartacus的自定義指令cxOutlet, 廣泛應(yīng)用于B2C和B2B的各種頁(yè)面設(shè)計(jì)中，比如這個(gè)shared組件：cx-table.

cxOutlet通過(guò)@Input修飾，需要由使用者傳遞一個(gè)字符串進(jìn)來(lái)。

在table控件的getDataOutletRef方法加個(gè)console.log觀察輸出：

table.unitUsers.data.name的渲染，奧秘在方法buildOutlet里：

cxOutletContext里維護(hù)了待渲染的Angular Component名稱:

在ngOnChanges hook里調(diào)用this.render方法：

before位置里沒有模板：

replace position的outlet讀取：

這里得到了待渲染的cx-table-data-cell：

準(zhǔn)備渲染TableDataCellComponent:

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

總結(jié)

以上是生活随笔為你收集整理的SAP Spartacus自定义指令cxOutlet的工作原理的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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