0%

Angular自定义路由复用策略，返回上一个页面页面保持

发表于 更新于
本文字数： 2.2k 阅读时长 ≈ 2 分钟

        我们都知道在Angular的SPA应用中，应用通过路由在各个页面之间进行导航。 默认情况下，用户在离开一个页面时，这个页面(组件)会被Angular销毁，用户的输入信息也随之丢失，当用户再次进入这个页面时，看到的是一个新生成的页面(组件)，之前的输入信息都没了。
        在实际工作中遇到了这样的问题，部分页面需要保存用户的输入信息，用户再次进入页面时需要回到上一次离开时的状态，部分页面每次都要刷新页面，不需要保存用户信息。而页面间的导航正是通过路由实现的，Angular的默认行为不能满足我们的需求！好在Angular提供了RouteReuseStrategy接口，通过实现这个接口，我们就可以自定义路由复用策略。
        具体的实现如下：

1
// 1. 写一个类实现`RouteReuseStrategy`接口[如果是Ionic工程则需要实现IonicRouteStrategy]自定义路由复用策略
2
import {ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy} from '@angular/router';
3
4
    export class CustomRouteReuseStrategy implements RouteReuseStrategy {
5
        handlers: { [key: string]: DetachedRouteHandle } = {};
6
        shouldDetach(route: ActivatedRouteSnapshot): boolean {
7
            return route.data.reload || false;
8
        }
9
10
    store(route: ActivatedRouteSnapshot, handle: {}): void {
11
        if (route.data.reload && this.getUrl(route)) {
12
            this.handlers[this.getUrl(route)] = handle;
13
        }
14
    }
15
16
    shouldAttach(route: ActivatedRouteSnapshot): boolean {
17
        return !!this.handlers[this.getUrl(route)];
18
    }
19
20
    retrieve(route: ActivatedRouteSnapshot): any {
21
        if (!this.getUrl(route)) {
22
            return null;
23
        }
24
        return this.handlers[this.getUrl(route)];
25
    }
26
27
    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
28
        return future.routeConfig === curr.routeConfig && JSON.stringify(future.params) === JSON.stringify(curr.params);
29
    }
30
31
    getUrl(route: ActivatedRouteSnapshot) {
32
        if (!route.parent.url.join('/') || !route.url.join('/')){
33
            return null;
34
        }
35
        let url = '';
36
        if (route.parent.url.join('/')) {
37
            url += route.parent.url.join('/') + '/';
38
        }
39
        if (route.url.join('/')) {
40
            url += route.url.join('/');
41
        }
42
        return url === '' ? null : url;
43
    }
44
45
}
46
47
48
// 2. 在AppModule中配置
49
@NgModule({
50
    declarations: [ ... ],
51
    import: { ... }
52
    providers: [
53
        { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
54
    ]
55
})
56
57
58
// 3. 在Routing中配置
59
const routes: Routes = [
60
  ...,
61
  { path: 'class-list', component: ClassListPage, data: { reload: true } }
62
];