前言:
最近開發vscode的時候發現了一個很神奇的事情,vscode到angular的整個通信流程應該是 vscode請求數據-> 拿到數據發送給angular->angular監聽數據並渲染頁面,但是最神奇的事情來了!!!就是在我vscode像angular發送數據的時候數據竟然丟失了!!!!
如圖可以看到,我在向angular發送數據前的時候,workitem.priority里還是有值的,但是在angular剛監聽的時候,message.data里的priority就為undefined了,令我百思不得其解,這是為啥嘞???
那么再來說一說,當使用angular開發vscode組件的時候,angular應該如何監聽vscode發來的事件,以及如何判斷是進那個組件的
思路:
一、 全局監聽
將監聽vscode事件部分單獨抽出來,並且在app.module.ts里面調用。單獨發送init事件告知angular,此時用戶觸發的是哪個事件,應該對應的顯示哪個組件,當進入組件時,在觸發調用數據的事件,從而讓vscode去發送事件請求向后端拿數據
二、 組件監聽 (我采用的第二種,因為最開始就是分別監聽的,但是推薦采用第一種方式~)
1. init事件只用來告知angular應該渲染那個頁面,不發送數據!!!(優點:這樣即便多個組件觸發了init事件也不會導致數據丟失或重置)
2. 首先在全局laoding.module.ts里監聽init事件,來判斷應該進入那個組件
邏輯:
1、 進入頁面首先渲染loading
2、在loading里監聽init事件,判斷應該跳那個組件 (可以理解為你自己寫了個路由組件,由你來判斷跳轉到那個組件)
3. 在組件里在分別調用work-item和my-profile數據
注意:因為我只有兩個頁面,所以組件跳轉沒有采用路由跳轉,而是直接根據條件不同顯示了不同的組件,頁面多時推薦采用路由跳轉的方式
說遠了。。。。回歸正題,所以到底是為什么導致數據丟失呢?而且要怎么解決呢? 繼續往下看
發生的原因:
1、 頁面斷點時可以發現,工作項頁渲染時調用了兩次workItemInit事件, 發送了兩次數據給angular,初步推斷可能是第二次數據覆蓋了第一次數據時發生了什么不可告人的事情。。。。
2、 觸發兩次workItemInit事件的原因是因為在工作項的頁面里有兩個組件分別調用了數據,並且我是采用繼承的方式來傳值的,所以導致觸發了兩次
解決方案:
1、 首先,把路由判斷和數據分開傳送, 避免數據被重復調用導致數據丟失
2、在loading里全局監聽vscodeRoute,判斷跳轉那個路由
更改后Angular里應該有三個位置監聽
(1)loading用來監聽vscodeRoute
(2)workitem用來監聽workitem的數據
(3) my-profile用來監聽mu-profile的數據
3、在angular中使用rxjs訂閱流
1)以流的形式傳遞出去
2)訂閱流,獲取數據----流只有被訂閱了才會執行