先看 cxOutletRef 指令的效果：ng-template 裡定義瞭如下圖示 1 區域所示的自定義 UI，透過 cxOutletRef, 將其插入到圖示 2 所示的 ProductDetailsPageTemplate裡：

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

原始碼：

```html
<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>
```

執行時的效果：
![](https://img-blog.csdnimg.cn/img_convert/f8363f5c80ea31dd5c0ba5559957bbd3.png)

檢視原始碼，發現該指令的有效實現不多，僅僅呼叫 OutletService.add 方法：

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

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

1. outlet：代表自定義 UI 插入的 UI 位置，透過字串代表。可以將 template 或者 ComponentFactory 插入該字串代表的 UI 位置。
![](https://img-blog.csdnimg.cn/img_convert/9697529aaeb5e8186e93fccd7cf57018.png)

2. tpl: 待插入的自定義 UI 所在的頁面模板例項。

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

index.html 頁面裡只有一個 cx-storefront selector, 對應 StorefrontComponent：
![](https://img-blog.csdnimg.cn/img_convert/73432e5a5457478a63e38ea233c03592.png)

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

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

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

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

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

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

在渲染 embedded view 時，如果遇到該檢視包含了 cxOutlefRef 指令，就觸發依賴注入機制，生成該指令的例項。

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

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

從 Angular 內部變數 _lView 裡，我們可以輕易辨別出當前 ng_template 例項代表的頁面：

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

比如這個高亮的結構：
![](https://img-blog.csdnimg.cn/img_convert/29a0e0e480a267e09952d1976ef1d0ed.png)

對應了 HTML 裡這段 ng-template 宣告：
![](https://img-blog.csdnimg.cn/img_convert/9e9a81545a34f8267f2e4c57c3d1eda2.png)

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

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

對應 template 裡這段程式碼：

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

直接在 .html 檔案裡設定斷點：
![](https://img-blog.csdnimg.cn/img_convert/723ebdb4a5f469a3e8a60d1ad2f12d51.png)

在最新版本的 Chrome 裡，這些斷點可以直接觸發了：
![](https://img-blog.csdnimg.cn/img_convert/f1080d02f2f297bea930f7e9ad37217e.png)

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

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

這一切，都歸功於 SAP Spartacus 獨特的設計，即所有 Angular Component，都透過 PageLayoutComponent 進行渲染：
![](https://img-blog.csdnimg.cn/img_convert/6198dab15b80cefafc3433c2406564b8.png)

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

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

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

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

相關文章