这个弹出窗口的技术实现,通过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的原创文章,尽在:"汪子熙":