[Angular] 該如何使用設定 RouteReuseStrategy

Angular 路由機制中,有一個選項是 routeReuseStrategy,這一個設定可以讓我們設定路由轉換的過程中,是否要保留 component 並重複使用,而相關的使用方式如下

設定

首先,先建立一個 Class 並實作 RouteReuseStrategy 介面,RouteReuseStrategy 介面包含了五個方法需要被實作

1
2
3
4
5
6
7
abstract class RouteReuseStrategy {
abstract shouldDetach(route: ActivatedRouteSnapshot): boolean
abstract store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void
abstract shouldAttach(route: ActivatedRouteSnapshot): boolean
abstract retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null
abstract shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean
}
  • shouldDetach : 判斷路由是否能重複使用
  • store : 將脫離的路由內容暫存起來
  • shouldAttach : 當路由進入時,可判斷是否還原路由暫存內容
  • retrieve : 從 Cache 中取得對應的暫存內容
  • shouldReuseRoute : 判斷是否同一路由

基本範例程式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import {
RouteReuseStrategy,
DefaultUrlSerializer,
ActivatedRouteSnapshot,
DetachedRouteHandle
} from '@angular/router';

export class AppRoutingCache implements RouteReuseStrategy {
public static handlers: { [key: string]: DetachedRouteHandle } = {};

// 判斷路由是否能重複使用
public shouldDetach(route: ActivatedRouteSnapshot): boolean {
// 默認所有的路由設定都可以重複使用
// 可透過 route.data 的方式來設定重複使用的規則
return true;
}

// 當路由離開時,會觸發此方法
public store(
route: ActivatedRouteSnapshot,
handle: DetachedRouteHandle
): void {
// 將目前路由內容暫存起來
AppRoutingCache.handlers[route.routeConfig.path] = handle;
}

// 當路由進入時,可判斷是否還原路由的暫存內容
public shouldAttach(route: ActivatedRouteSnapshot): boolean {
return (
!!route.routeConfig && !!AppRoutingCache.handlers[route.routeConfig.path]
);
}
// 從 Cache 中取得對應的暫存內容
public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
if (!route.routeConfig) {
return null;
}
return AppRoutingCache.handlers[route.routeConfig.path];
}

// 判斷是否同一路由
public shouldReuseRoute(
future: ActivatedRouteSnapshot,
current: ActivatedRouteSnapshot
): boolean {
return future.routeConfig === current.routeConfig;
}
}

註冊

將寫好的 class 註冊在 RootModuleproivders 的區塊中即可

1
providers: [{ provide: RouteReuseStrategy, useClass: AppRoutingCache }],

當這樣子設定完成後,Angular 路由機制就會依照我們實作的 RouteReuseStrategy 來管理路由的相關資訊,內包含 ComponentRef ,效果會是當我們重新返回該路由時,原本輸入的資料還會存在。因為是使用當時離開時的 Component 而不是重新建立一個新的。

實際的操作效果可以參考 範例程式

參考資料