SAP Spartacus Popover Directive 構造函數的用途分析

該構造函數位於文件 popover.directive.ts 裏：

第 11 行 cxPopOver Directive 施加到 button 元素上以後，運行時，cxPopOver Directive 的構造函數觸發。其參數，既有應用程序定義的類型，好比 PositioningService, 也有框架使用的類型，好比 ElementRef，ViewContainerRef 等等。

• element: 該 Directive 綁定的頁面元素，在這個例子裏是 button.

• viewContainer: 類型爲 ViewContainerRef. 三個全是私有屬性。

咱們注入這個實例的惟一目的，就是調用其 createComponent 方法。

const containerFactory = this.componentFactoryResolver.resolveComponentFactory(
      PopoverComponent
    );
    this.popoverContainer = this.viewContainer.createComponent(
      containerFactory
    );

createComponent 方法須要輸入參數爲 containerFactory，後者經過另外一個注入參數實例 componentFactoryResolver 提供。componentFactoryResolver 能夠理解成製造工廠的工廠函數：須要的輸入參數是待生產 Component 的定義，在這個例子裏爲 PopoverComponent：

而 createComponent 返回的數據，類型爲 ComponentRef, 包含了 PopoverComponent 的實例。

• renderer: Renderer2

引入該屬性，是爲了調用其 appendChild 方法，把建立好的 PopoverComponent 實例，添加到 DOM 樹中去。

• changeDetectorRef: ChangeDetectorRef

在 SAP Spartacus 實現中沒有用到。

• positioningService: PositioningService

在 SAP Spartacus 實現中沒有用到。

負責元素 focus 相關的實現。

• winRef: WindowRef

負責將新建的 PopoverComponent 實例中的 DOM 元素，添加到當前 document 的 body 節點上。

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