解析 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的原創文章,盡在:"汪子熙":