Angular路由復用策略

2021-09-16 12:13:37 字數 1723 閱讀 9008

路由在執行過程中對元件無狀態操作,即路由離退時元件狀態也一併被刪除;當然在絕大多數場景下這是合理的。

angular路由與元件一開始就透過routermodule.forroot形成一種關係,當路由命中時利用componentfactoryresolver構建元件,這是路由的本質。

而每乙個路由並不一定是一次性消費,angular 利用routereusestrategy貫穿路由狀態並決定構建元件的方式;當然預設情況下(defaultroutereusestrategy)像開頭說的,一切都不進行任何處理。

routereusestrategy從2就已經是實驗性,當前依然如此,這麼久應該是可信任。

routereusestrategy我稱它為:路由復用策略;並不複雜,提供了幾種辦法通俗易懂的方法:

這看起來就像是乙個時間軸關係,用一種白話文像是這樣:把路由/list設定為允許復用(shoulddetach),然後將路由快照存在store當中;當shouldreuseroute成立時即:再次遇到/list路由後表示需要復用路由,先判斷shouldattach是否允許還原,最後從retrieve拿到路由快照並構建元件。

當理解這一原理時,假如我們拿開頭搜尋列表返回的問題就變得非常容易解決。

誠如上面說明的,只需要實現routereusestrategy介面即可自定義乙個路由利用策略。

import  from '@angular/router';

export class ******reusestrategy implements routereusestrategy = {};

shoulddetach(route: activatedroutesnapshot): boolean

store(route: activatedroutesnapshot, handle: detachedroutehandle): void ;

}shouldattach(route: activatedroutesnapshot): boolean

retrieve(route: activatedroutesnapshot): detachedroutehandle

shouldreuseroute(future: activatedroutesnapshot, curr: activatedroutesnapshot): boolean

}

定義乙個_cacherouters用於快取資料(路由快照及當前元件例項物件)。

最後將策略註冊到模組當中:

providers: [

]

假設我們有這麼乙個路由配置:

routermodule.forroot([

, ])

搜尋元件用於搜尋動作,並在根據搜尋結果跳轉至編輯頁,儲存後又回到最後搜尋結果的狀態(這部分**我就不貼有興趣見 plnkr)。

上述只是乙個簡單的拋磚引玉作用,實則對於復用的判斷會更複雜、滾動條位置、快取清理等等。

善用這種路由復用策略機制可以解決很多web體驗上的問題。

angular路由復用策略

可以直接複製使用 使用時需要註冊服務,同時在路由上定義reuse boolean 條件為真即允許路由復用。當路由離開時會觸發。按path作為key儲存路由快照 元件當前例項物件 store route activatedroutesnapshot,handle detachedroutehandle...

Angular4 路由復用,路由快取

angular中維持下拉框選中狀態,input輸入狀態等等 angular專案中如何實現路由快取 相信很多朋友和筆者一樣,都對vue中的keep alive設計拍案叫絕。如此乙個簡單的問題在angular專案中實現起來確非易事。筆者給出一種解決方法,希望對要在angular專案中實現類似vue的ke...

Angular路由 子路由

在商品詳情頁面,除了顯示商品id資訊,還顯示了商品描述,和銷售員的資訊。通過子路由實現商品描述元件和銷售員資訊元件展示在商品詳情元件內部。ng g component productdesc ng g component sellerinfo 重點是修改銷售員資訊元件,顯示銷售員id。import ...