共计 764 个字符，预计需要花费 2 分钟才能阅读完成。
这个弹出窗口的技术实现，通过 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 的原创文章，尽在：” 汪子熙 ”:
