Angular 學習筆記 (路由外傳 - RouteReuseStrategy)

refer : 

https://github.com/angular/angular/issues/10929

https://stackoverflow.com/questions/41280471/how-to-implement-routereusestrategy-shoulddetach-for-specific-routes-in-angular

 

一切從這個開始. 

剛開始接觸 SPA 的朋友們可能會很不習慣 scroll position 在遊覽器後退的時候並不會智慧的滾動回之前頁面的位置. 

這時就會出現上面這張圖片的需求了.

我個人認為, 做 SPA 互動設計就不要走回跳轉頁面的老套路線. 應該尋求創新而不是模擬從前的功能. 

不過現實就是, 創新不出來..只能走老路...哈哈

下面來聊聊模擬的技術. 

我們知道 SPA 是通過 history.push 來替換遊覽器地址的,然後通過路由器匹配出元件, 在渲染和替換頁面. 

即使是遊覽器後退也是通過監聽 onpopstate, 然後匹配路由, 渲染元件...

所以整個過程都被 javascript l攔截處理了,遊覽器基本上什麼也幹不了.  (從前遊覽器會在 url 替換時 scroll to top, 在後退時 scroll to 之前的位置)

那麼我們就得替代遊覽器工作了.

首先建一個全域性的滾動條. 

在前進時要 scroll to top, 我們可以攔截 router change 事件,然後 scrollTop = 0

在後退時, 我們要恢復位置就必須做記入. 

那麼我們在 router change 時, 把當前的 scrollTop 記入起來.

這樣就行了.

呃... 哪有這麼容易...

遊覽器後退的時候, 其實是使用之前的快取資料的, 所以你會感覺它渲染很快馬上就回滾到位了.

但 SPA 每一次都會從新渲染頁面, 元件初始化-> ajax -> 渲染 -> 這時候你才可以滾動到之前的位置..

來, 介紹 angular 的 RouteReuseStrategy ! 

這個東西可以讓元件所有 state 和渲染好的 html 被存起來. 然後快速的調出來用. 

no more 元件初始化-> ajax -> 渲染.

export declare abstract class RouteReuseStrategy {
    abstract shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean;
    abstract shouldAttach(route: ActivatedRouteSnapshot): boolean;
    abstract retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null;
    abstract shouldDetach(route: ActivatedRouteSnapshot): boolean;   
    abstract store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle | null): void; 
}

這個是它的類,我們繼承然後替換掉 provider 就可以被 angular 呼叫了. 

angular 會在每一次 router change 的時候呼叫它. 

angular 路由就是棵樹, 當 url 從 a/b/c/d 切換到 a/e/f/g 時. 

shouldReuseRoute 會被觸發. angular 會讓你去對比看是否要 reuse 

a vs a

b vs e

c vs f

d vs g 

一般情況下 a vs a 自然時 reuse

b vs e 就替換, 而一旦 parent 被替換, 那麼所有 child 自然也是被替換的 

替換一旦發生, 就會有某些元件要被丟棄 destroy, 這時 shouldDetech, store 就會被呼叫, 用於快取這些已經渲染完成即將被丟棄的元件. 

有元件被丟棄自然有元件需要進來替補, 而這時 shouldAttach,retrieve 就會被呼叫, 用來調出快取的元件.

所以流程是這樣 : 

1. 是否替換 ? 

2. 替換髮生, 有元件離去, 有元件加入

3. 離去的元件, 我們可以快取

4. 加入的元件, 我們可以使用快取好的元件. 

替換->快取->重用 就是整體的核心了. 

 

關鍵詞:元件 angular 替換 我們 渲染 遊覽 vs routereusestrategy abstract 快取

相關推薦:

Role Based Authorization in Angular – Route Guards

angular學習筆記

聊聊我對現代前端框架的認知

適用於 Angular Lazyload 下的 RouteReuseStrategy

ng-book札記——路由

RouteReuseStrategy for Route Caching in Angular

Angular路由——路由守衛

做了一年的react自己的感悟和總結

Angular路由複用策略