关于spa:SAP-Spartacus-自定义Popover指令如何实现弹出对话框自动关闭功能

Popover Component 的 appendToBody 如果设置成 true：

则其 DOM 元素会呈现在 body 节点的 开端 :

当我点击屏幕任意空白地位时，这个 Popover 对话框会主动隐没。

精确的说，是从 DOM tree 中移除，而不是设置成 invisible.

Popover 自定义指令的实现源代码里，会通过 @HostListener 来监控宿主元素的 document:click 事件。

如果 this.insideClicked 为 false，阐明是 outside_click, 因而应用 eventSubject 发送这个事件。

这里要解决两个问题：

1. this.insideClicked 的标记位什么时候设置的？
2. 通过 EventSubject 发送的诸如 OUTSIDE_CLICK 的事件，监听者是谁？

首先解决第一个问题。如果 Popover 自身的宿主元素，即 Popover Component wrapper 被点击，this.insideClicked 被置为 true，同时发送 PopoverEvent.INSIDE_CLICK 事件：

否则，当 document:click 事件触发时，阐明 Popover Component wrapper 之外的区域被点击，此时发送 PopoverEvent.OUTSIDE_CLICK 事件：

第二个问题：

在 handlePopoverEvents 办法的 this.popoverContainer.instance.eventSubject.subscribe 里，注册 EventSubject 对应事件的处理函数：

函数 handlePopoverEvents 在 Popover 实例创立后，执行其办法 renderPopover 时被调用：

留神，this.viewContainer.clear 办法调用，触发 DOM 元素被删除的原生操作。

更多 Jerry 的原创文章，尽在：” 汪子熙 ”: