Angular4 路由復用,路由快取

2021-08-15 11:32:16 字數 1428 閱讀 7530

angular中維持下拉框選中狀態,input輸入狀態等等

angular專案中如何實現路由快取

相信很多朋友和筆者一樣,都對vue中的keep-alive設計拍案叫絕。如此乙個簡單的問題在angular專案中實現起來確非易事。筆者給出一種解決方法,希望對要在angular專案中實現類似vue的keep-alive效果的你有所幫助。

import  from '@angular/router';

export

public

static handlers:  = {};

// 表示對路由允許復用

public shoulddetach(route: activatedroutesnapshot): boolean 來進行選擇性使用,**如下

// if (!route.data.keep) 

return

true;

}// 當路由離開時會觸發。按path作為key儲存路由快照&元件當前例項物件

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

// 若path在快取中有的都認為允許還原路由

public shouldattach(route: activatedroutesnapshot): boolean 

// 從快取中獲取快照,若無則返回null

public retrieve(route: activatedroutesnapshot): detachedroutehandle 

}// 進入路由觸發,判斷是否同一路由

public shouldreuseroute(future: activatedroutesnapshot, current: activatedroutesnapshot): boolean }

import  from '@angular/router';

以上**:

需要注意的事是需要在乙個路徑下

否則報錯:

具體解釋:

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

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

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

這一段**:

angular4路由基礎運用

1.base href 元素 大多數帶路由的應用都要在index.html的標籤下先新增乙個元素,來告訴路由器該如何合成導航用的url。content copy href 2.從路由庫中匯入 angular的路由器是乙個可選的服務,它用來呈現指定的url所對應的檢視。它並不是angular核心庫的一...

angular6 路由配置

一.簡述 方便我們可以url方式和鏈結的方式使用該元件,不僅僅通過元件選擇器使用它。二.配置路由 第一步 建立路由檔案 routing flat module 第二步 修改路由檔案 第三步 建立乙個登入元件 ng generate component login第四步 路由檔案中配置登入元件 注意 ...

Angular6 路由概述

路由的說明 路由是實現spa的基礎設施 作用 讓使用者從乙個檢視導航到另乙個檢視 路由是 url和元件的對應規則 使用 html5風格 history.pushstate 的導航 支援 重定向 路由高亮 萬用字元路由 路由引數 支援 子路由 路由模組 路由守衛 非同步路由等 路由的配置 再index...