Popover Component 的 appendToBody 如果设置成 true:
则其 DOM 元素会呈现在 body 节点的 开端 :
当我点击屏幕任意空白地位时,这个 Popover 对话框会主动隐没。
精确的说,是从 DOM tree 中移除,而不是设置成 invisible.
Popover 自定义指令的实现源代码里,会通过 @HostListener 来监控宿主元素的 document:click 事件。
如果 this.insideClicked 为 false,阐明是 outside_click, 因而应用 eventSubject 发送这个事件。
这里要解决两个问题:
- this.insideClicked 的标记位什么时候设置的?
- 通过 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 的原创文章,尽在:” 汪子熙 ”: