SAP Spartacus 裏的 cxOutletRef 指令執行過程分析

先看 cxOutletRef 指令的效果：ng-template 裏定義了以下圖標 1 區域所示的自定義 UI，經過 cxOutletRef, 將其插入到圖標 2 所示的 ProductDetailsPageTemplate裏：

源代碼：

<ng-template cxOutletRef="ProductDetailsPageTemplate" cxOutletPos="before" let-model>
    <div class="before-pdp">
      Campaign UI for Canon
    </div>

    <div class="after-pdp">
      {{ model.component | async | json }}
    </div>

  </ng-template>

運行時的效果：

查看源代碼，發現該指令的有效實現很少，僅僅調用 OutletService.add 方法：

仔細閱讀 add 方法的三個參數：

1. outlet：表明自定義 UI 插入的 UI 位置，經過字符串表明。能夠將 template 或者 ComponentFactory 插入該字符串表明的 UI 位置。
   
2. tpl: 待插入的自定義 UI 所在的頁面模板實例。

index.html 頁面裏只有一個 cx-storefront selector, 對應 StorefrontComponent：

Outlet.service.ts 裏維護了一個字典結構，key 爲 outlet 名稱，值爲 cxOutletRef 指令所在的 ng-template 實例。

Storefront Component refresh 時，會調用 hook，包含施加在其上的 Directive：

經過 Angular 標準的 ngOnChanges lifecycle hook，觸發該 cxOutlet Directive 的 render 方法：

在渲染 embedded view 時，若是遇到該視圖包含了 cxOutlefRef 指令，就觸發依賴注入機制，生成該指令的實例。

從 Angular 內部變量 _lView 裏，咱們能夠輕易辨別出當前 ng_template 實例表明的頁面：

好比這個高亮的結構：

對應了 HTML 裏這段 ng-template 聲明：

而 div.after-pdp 及 text, JsonPipe 和 AsyncPipe：

對應 template 裏這段代碼：

直接在 .html 文件裏設置斷點：

在最新版本的 Chrome 裏，這些斷點能夠直接觸發了：

在渲染 cxOutletRef 指向的 ProductDetailsPageTemplate 時，會觸發 outlet Directive 的 ngOnChanges 方法：

這一切，都歸功於 SAP Spartacus 獨特的設計，即全部 Angular Component，都經過 PageLayoutComponent 進行渲染：

而 PageLayoutComponent 實現裏，包含了 cxOutlet 的消費：

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