乐趣区

关于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 的原创文章,尽在:” 汪子熙 ”:

退出移动版