該構造函數位于文件 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 樹中去。

之所以不直接操作原生 DOM，是為了跨平臺支持。

• changeDetectorRef: ChangeDetectorRef

在 SAP Spartacus 實現中沒有用到。

• positioningService: PositioningService

在 SAP Spartacus 實現中沒有用到。

負責元素 focus 相關的實現。

• winRef: WindowRef

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

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

總結

以上是生活随笔為你收集整理的SAP Spartacus Popover Directive 构造函数的用途分析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。