該按鈕的實現位於 toggle-status.component.html 裡，點選後，可以對當前顯示的 B2B item 進行 activation 和 deactivation 操作。

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

toggle(item) 方法的實現：

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

如果當前 item 處於 active 狀態，則當前 toggle 應該執行 deactivation 操作，呼叫透過建構函式注入的 messageService, 透過 add 方法，新增一個新的 message 物件。

這個物件的 timeout 值為 3000，意思是 3 秒後，confirmation 對話方塊自動關閉。

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

this.data$ 是一個 ReplaySubject, 其作用是在給定的時間內，傳送所有的已經收到的緩衝區資料，當時間過期後，將銷燬之前已經收到的資料，重新收集即將到來的資料。所以在構造的時候，需要給定兩個值，一個是緩衝區的大小（bufferSize），一個是給定緩衝區存活的視窗時間（windowTime），需要注意的是 ReplaySubject 所使用的緩衝區的策略是 FIFO.

我們使用 ReplaySubject 來實現 3 秒後自動關閉 confirmation 對話方塊的效果。

這個 data$ 在 message.service.ts 裡透過 get 方法被暴露給外界消費者：

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

對其感興趣的 message.component.ts, 呼叫 messageService 的 get 方法拿到 ReplaySubject，然後訂閱：

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

這樣，執行時，message.component.ts 的 render 方法，繪製 confirmation 對話方塊：

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

那麼對話方塊如何在 3 秒後自動關閉的？

Confirmation.message.component.ts 的 父類實現是 base-message.component.ts, 在其 ngOnInit 鉤子函式里：

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

呼叫原生的 setTimeout, 設定 3 秒後自動關閉的行為。

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

SAP Spartacus B2B 頁面 Disable Confirmation 對話方塊的顯示原理

相關文章