SAP Spartacus Popover Directive 建構函式的用途分析

注销發表於2021-05-03
函式

該建構函式位於檔案 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的原創文章，盡在："汪子熙":

相關文章