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的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的SAP Spartacus 自定义Popover指令，如何实现弹出对话框自动关闭功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。