这个弹出窗口的技术实现,通过 SAP Spartacus 自定义的 popover Component 实现而成:
留神,当我刚接触 Angular 时,误以为下图标号为 1 的 a 标签,和标号为 2 的自定义标签 cx-org-toggle-status, 会依照其在 unit-details.component.html 里呈现的先后顺序,呈现在最终的页面里。
实际上,我这种了解是谬误的。
SAP Spartacus B2B 页面如下图左边高亮区域所示,技术上实现在 cx-org-card 选择器对应的 CardComponent 里:
Card 的 layout 即布局设置,实现在 card.component.html 里:
其中 class 为 actions 的 div 标签,作为一个 place holder,包容所有生产 CardComponent selector, 即 cx-org-card 时传入的蕴含属性 actions 的 DOM 元素。
这种动静注入元素的机制,通过下列语句实现,称为 content projection:
ng-content select=”[actions]”
也就是说:下图标号为 1 的 a 标签,和标号为 2 的 cx-org-toggle-status 标签页,因为都带有 actions 的属性:
因而运行时,会呈现在下图标号为 1,class 为 actions 的 div 元素里。
因而,我只须要在 CardComponent 的 template 实现,即 card.component.html 里,申明 cxPopover, 这样所有生产了 CardComponent selector cx-org-card 的利用 Component,都可能主动看到 (i) icon, 而不必在 Spartacus B2B 的 6 个 Details Component 里,反复申明 cxPopOver 了。
更多 Jerry 的原创文章,尽在:” 汪子熙 ”: