美文网首页Angular 4.x 修仙之路
Angular自定义路由复用策略,返回上一个页面页面保持

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

作者: 窗外的雪儿飞 | 来源:发表于2019-04-18 16:48 被阅读15次

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

// 1. 写一个类实现`RouteReuseStrategy`接口[如果是Ionic工程则需要实现IonicRouteStrategy]自定义路由复用策略
import {ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy} from '@angular/router';

    export class CustomRouteReuseStrategy implements RouteReuseStrategy {
        handlers: { [key: string]: DetachedRouteHandle } = {};
        shouldDetach(route: ActivatedRouteSnapshot): boolean {
            return route.data.reload || false;
        }

    store(route: ActivatedRouteSnapshot, handle: {}): void {
        if (route.data.reload && this.getUrl(route)) {
            this.handlers[this.getUrl(route)] = handle;
        }
    }

    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        return !!this.handlers[this.getUrl(route)];
    }

    retrieve(route: ActivatedRouteSnapshot): any {
        if (!this.getUrl(route)) {
            return null;
        }
        return this.handlers[this.getUrl(route)];
    }

    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        return future.routeConfig === curr.routeConfig && JSON.stringify(future.params) === JSON.stringify(curr.params);
    }

    getUrl(route: ActivatedRouteSnapshot) {
        if (!route.parent.url.join('/') || !route.url.join('/')){
            return null;
        }
        let url = '';
        if (route.parent.url.join('/')) {
            url += route.parent.url.join('/') + '/';
        }
        if (route.url.join('/')) {
            url += route.url.join('/');
        }
        return url === '' ? null : url;
    }

}


// 2. 在AppModule中配置
@NgModule({
    declarations: [ ... ],
    import: { ... }
    providers: [
        { provide: RouteReuseStrategy, useClass: CustomRouteReuseStrategy }
    ]
})


// 3. 在Routing中配置
const routes: Routes = [
  ...,
  { path: 'class-list', component: ClassListPage, data: { reload: true } }
];

相关文章

网友评论

    本文标题:Angular自定义路由复用策略,返回上一个页面页面保持

    本文链接:https://www.haomeiwen.com/subject/routgqtx.html