該建構函式位於檔案 popover.directive.ts 裡：

![](https://img-blog.csdnimg.cn/img_convert/1b9eda8874ecd1ee8fc83d1697790333.png)

![](https://img-blog.csdnimg.cn/img_convert/be48e0a3737aa444b67c26187e59a972.png)

第 11 行 cxPopOver Directive 施加到 button 元素上之後，執行時，cxPopOver Directive 的建構函式觸發。其引數，既有應用程式定義的型別，比如 PositioningService, 也有框架使用的型別，比如 ElementRef，ViewContainerRef 等等。

![](https://img-blog.csdnimg.cn/img_convert/90468c64afb8292e789d3f5d4cb1cb3c.png)

* element: 該 Directive 繫結的頁面元素，在這個例子裡是 button.

![](https://img-blog.csdnimg.cn/img_convert/fc02bc89c1b844578b14e5063b6fb16e.png)

* viewContainer: 型別為 ViewContainerRef. 三個全是私有屬性。

![](https://img-blog.csdnimg.cn/img_convert/a4671a5fc4846943ebde5e7d9ce31090.png)

我們注入這個例項的唯一目的，就是呼叫其 createComponent 方法。

![](https://img-blog.csdnimg.cn/img_convert/15d901ba6e063e6e90b0b8c7d751298b.png)

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

createComponent 方法需要輸入引數為 containerFactory，後者透過另一個注入引數例項 componentFactoryResolver 提供。componentFactoryResolver 可以理解成製造工廠的工廠函式：需要的輸入引數是待生產 Component 的定義，在這個例子裡為 PopoverComponent：

![](https://img-blog.csdnimg.cn/img_convert/917df7b3df2e4fcab81fb26c92a24b97.png)

而 createComponent 返回的資料，型別為 ComponentRef, 包含了 PopoverComponent 的例項。

![](https://img-blog.csdnimg.cn/img_convert/9defecb9c406a8d560f52854f226eed8.png)

* renderer: Renderer2

引入該屬性，是為了呼叫其 appendChild 方法，把建立好的 PopoverComponent 例項，新增到 DOM 樹中去。

![](https://img-blog.csdnimg.cn/img_convert/0c796971afbd1735140f9f500f557302.png)

* changeDetectorRef: ChangeDetectorRef

在 SAP Spartacus 實現中沒有用到。

* positioningService: PositioningService

在 SAP Spartacus 實現中沒有用到。

負責元素 focus 相關的實現。

![](https://img-blog.csdnimg.cn/img_convert/36b1c26a19dc152b7945e93c4813d4e3.png)

* winRef: WindowRef

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

![](https://img-blog.csdnimg.cn/img_convert/626d937de5513d79b61a7ac3a4e59172.png)

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

相關文章