CODEWITHSUNDEEP
javascriptangularjsangularangular-ui-routerangular2-routing
Alvaro Molina
Alvaro Molina

Reputation: 118

Angular Sticky States in Angular 2+

I'm migrating a Angular 1.5.X app to Angular 4. In my App I use Angular Ui-Router Sticky State https://github.com/ui-router/sticky-states to avoid lose the content of my view when I made a navigation in some views of my APP but when I try to use this functionality in ng-router2 I can't find it. https://ui-router.github.io/ng2/tutorial/helloworld.

Some one know some router with similar function to Sticky State in Angular2+ or use the ui-router-ng2 to emulate the Sticky State.

Upvotes: 1

Views: 953

Answers (1)

Alvaro Molina
Alvaro Molina

Reputation: 118

I found this answer on internet I cant remember the web but the solution is not mine. 

import { Injectable } from '@angular/core';

import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, RouteReuseStrategy, DetachedRouteHandle, Route} from '@angular/router';

@Injectable()
export class ArchReuseStrategyService implements RouteReuseStrategy {

    handlers: {[key: string]: DetachedRouteHandle} = {};

     /** Determine if should detach the route */
    shouldDetach(route: ActivatedRouteSnapshot): boolean {
        console.log('CustomReuseStrategy:shouldDetach', route);
        return (route.routeConfig.sticky === true) ? true : false;
        // Or return true; 
    }
    /** Store the route */
    store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
        console.log('CustomReuseStrategy:store', route, handle);
        this.handlers[route.routeConfig.path] = handle;
    }
    /** Determina si la ruta y su subrutas deberian poder ser recuperadas */
    shouldAttach(route: ActivatedRouteSnapshot): boolean {
        console.log('CustomReuseStrategy:shouldAttach', route);
        return !!route.routeConfig && !!this.handlers[route.routeConfig.path];
    }
    /** Recover a store route*/
    retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
        console.log('CustomReuseStrategy:retrieve', route);
        if (!route.routeConfig) return null;
        return this.handlers[route.routeConfig.path];
    }
    /** Determine if the route should be reused*/
    shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
        console.log('CustomReuseStrategy:shouldReuseRoute', future, curr);
        return future.routeConfig === curr.routeConfig;
    }
}

Upvotes: 2

Related Questions