Cache de Routes y Components con RouteReuseStrategy — Angular
Regularmente cuando vamos de un Component A hacia otro Component B cambiando la ruta ,el lifecycle que los components cumplen ,el Component A llegaría a ser destruido con todos los datos recolectados y filtros aplicados en el component y el Component B se construirá con los datos enviados por el Component A
Ahora si volvemos del Component B a el Component A los filtros aplicados anteriormente no se reflejan .
Esto se debe a que la anterior instancia de el Component A ya fue destruida y esta es una nueva instancia del Component por lo tanto no tiene los datos de la anterior instancia.
Para poder mantener los datos de la anterior instancia del Component A podemos guardarlos en un Service y cuando se cree un nueva instancia del mismo recuperamos los datos del Service y los aplicamos en la instancia recientemente creada.
Se podrían utilizar distintas técnicas para poder volver a los datos de la anterior instancia de el Component A.
Entre estas técnicas esta el cacheado de los routes y los components utilizando la clase abstracta RouteReuseStretagy.
RouteReuseStretagy.-
Este es un provider de Angular que nos permite controlar el comportamiento de las rutas y el ciclo de vida sus Components.
export declare abstract class RouteReuseStrategy {
/**
* Se ejecuta cada vez que cambia una ruta, determina si se reutilizará la ruta, si el método retorna TRUE
* los demas métodos no seran ejecutados, pero si retorna FALSE los demas métodos seran ejecutados.
*/
abstract shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean;
/**
* Cuando se sale de un ruta se llama a este método el cual si devuelve TRUE se ejecutara el método store()
*/
abstract shouldDetach(route: ActivatedRouteSnapshot): boolean;
/**
* En este método realizamos el guardado de las instancias de las rutas que queremos reutilizar
*/
abstract store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void;
/**
* Si ingresamos a una ruta este método se ejecutará y si devuelve TRUE se ejecutara el método retrieve()
*/
abstract shouldAttach(route: ActivatedRouteSnapshot): boolean;
/**
* Este método retornaria la instancia de la ruta guardada anteriormente, si la instancia no fue guardada retornara un valor NULL
*/
abstract retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle;
}
Con ayuda de este provider podemos manipular las rutas que quisiéramos cachear y dependiendo de la Lógica podríamos disminuir la carga de imágenes ,reducir las peticiones a Servicios y persistencia de los estados de los components.
Este provider es muy interesante y poderoso por lo cual se realizará un ejemplo detallando su uso.
Vea támbien el ejemplo en este post
Gracias.
