头图

SAP Spartacus 里的 cxOutletRef 指令执行过程分析

JerryWang_汪子熙

先看 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的原创文章,尽在:"汪子熙":

阅读 131

Jerry Wang的SAP技术专栏
SAP成都研究院开发专家,SAP社区导师,SAP中国技术大使

Jerry 2007年从电子科技大学计算机专业硕士毕业后进入SAP成都研究院工作至今, SAP社区导师,SAP中国技术大使。

663 声望
98 粉丝
0 条评论
你知道吗?

Jerry 2007年从电子科技大学计算机专业硕士毕业后进入SAP成都研究院工作至今, SAP社区导师,SAP中国技术大使。

663 声望
98 粉丝
宣传栏