Popover Component的 appendToBody如果設定成true：

![](https://img-blog.csdnimg.cn/img_convert/12213d5fc425221d2c92efd3bcb6c8a9.png)

則其 DOM 元素會出現在 body 節點的 **末尾**:

![](https://img-blog.csdnimg.cn/img_convert/eb35cde3ad07213c390839ec1a8634a1.png)

當我點選螢幕任意空白位置時，這個Popover 對話方塊會自動消失。

![](https://img-blog.csdnimg.cn/img_convert/076cb33c0be60241d4a477cb97b7069e.png)

準確的說，是從 DOM tree中移除，而不是設定成invisible.

Popover 自定義指令的實現原始碼裡，會透過@HostListener來監控宿主元素的 document:click 事件。

![](https://img-blog.csdnimg.cn/img_convert/28791dab31363a4fc1859c0fd75612db.png)

如果this.insideClicked為false，說明是outside_click, 因此使用eventSubject傳送這個事件。

這裡要解決兩個問題：

1. this.insideClicked 的標誌位什麼時候設定的？
2. 透過EventSubject傳送的諸如OUTSIDE_CLICK的事件，監聽者是誰？

首先解決第一個問題。如果Popover本身的宿主元素，即Popover Component wrapper被點選，this.insideClicked被置為true，同時傳送PopoverEvent.INSIDE_CLICK事件：

![](https://img-blog.csdnimg.cn/img_convert/cbfed48c364fd9baa0edfd38d3f6745f.png)

否則，當document:click事件觸發時，說明Popover Component wrapper 之外的區域被點選，此時傳送PopoverEvent.OUTSIDE_CLICK事件：

![](https://img-blog.csdnimg.cn/img_convert/6c180b32571e43cb288bd655eddda5d7.png)

第二個問題：

在handlePopoverEvents方法的this.popoverContainer.instance.eventSubject.subscribe裡，註冊EventSubject對應事件的處理函式：

![](https://img-blog.csdnimg.cn/img_convert/0fb1e967a82735e9c09c635bbe3c33ca.png)

函式handlePopoverEvents在Popover 例項建立後，執行其方法renderPopover時被呼叫：

![](https://img-blog.csdnimg.cn/img_convert/993c320f9acae0fc09a6c39138ac4209.png)
注意，this.viewContainer.clear方法呼叫，觸發 DOM 元素被刪除的原生操作。

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20210407141621393.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2kwNDI0MTY=,size_16,color_FFFFFF,t_70)

SAP Spartacus 自定義Popover指令，如何實現彈出對話方塊自動關閉功能

相關文章