SAP Spartacus B2B Popover Directive 和 Popover Component 的生命週期管理

注销發表於2021-04-11

解析 SAP Spartacus B2B list 實現,即list.component.html時,因為在Component 模板裡遇到了[cxPopover]指令,因此觸發依賴注入:

首先建立directive例項:

當點選宿主元素 icon 時,因為@HostListener 註解的原因,一旦宿主元素髮生了 click 事件後,我們定義在 directive 實現裡的handleOpen方法會自動被呼叫:

下圖示號為1的componentFactoryResolver,來自Popover directive 建構函式的依賴注入;

標號為2的PopoverComponent,來自我們在另一個檔案裡實現並透過export 匯出的Component:

標號為3的PopoverContainer,是this.viewContainer(同樣是建構函式依賴注入的結果)呼叫 createComponent 返回的結果,其結構為:

在這裡插入圖片描述

this.popoverContainer.changeDetectorRef.detectChanges();

手動觸發PopoverComponent的Change detection - 變更檢測

然後呼叫handlePopoverEvents,執行事件處理註冊邏輯:

更多Jerry的原創文章,盡在:"汪子熙":

相關文章