How to implement RouteReuseStrategy shouldDetach for specific routes in Angular 2
Solution 1
Hey Anders, great question!
I've got almost the same use case as you, and wanted to do the same thing! User search > get results > User navigates to result > User navigates back > BOOM blazing fast return to results, but you don't want to store the specific result that the user navigated to.
tl;dr
You need to have a class that implements RouteReuseStrategy
and provide your strategy in the ngModule
. If you want to modify when the route is stored, modify the shouldDetach
function. When it returns true
, Angular stores the route. If you want to modify when the route is attached, modify the shouldAttach
function. When shouldAttach
returns true, Angular will use the stored route in place of the requested route. Here's a Plunker for you to play around with.
About RouteReuseStrategy
By having asked this question, you already understand that RouteReuseStrategy allows you to tell Angular not to destroy a component, but in fact to save it for re-rendering at a later date. That's cool because it allows:
- Decreased server calls
- Increased speed
- AND the component renders, by default, in the same state it was left
That last one is important if you would like to, say, leave a page temporarily even though the user has entered a lot of text into it. Enterprise applications will love this feature because of the excessive amount of forms!
This is what I came up with to solve the problem. As you said, you need to make use of the RouteReuseStrategy
offered up by @angular/router in versions 3.4.1 and higher.
TODO
First Make sure your project has @angular/router version 3.4.1 or higher.
Next, create a file which will house your class that implements RouteReuseStrategy
. I called mine reuse-strategy.ts
and placed it in the /app
folder for safekeeping. For now, this class should look like:
import { RouteReuseStrategy } from '@angular/router';
export class CustomReuseStrategy implements RouteReuseStrategy {
}
(don't worry about your TypeScript errors, we're about to solve everything)
Finish the groundwork by providing the class to your app.module
. Note that you have not yet written CustomReuseStrategy
, but should go ahead and import
it from reuse-strategy.ts
all the same. Also import { RouteReuseStrategy } from '@angular/router';
@NgModule({
[...],
providers: [
{provide: RouteReuseStrategy, useClass: CustomReuseStrategy}
]
)}
export class AppModule {
}
The final piece is writing the class which will control whether or not routes get detached, stored, retrieved, and reattached. Before we get to the old copy/paste, I'll do a short explanation of mechanics here, as I understand them. Reference the code below for the methods I'm describing, and of course, there's plenty of documentation in the code.
- When you navigate,
shouldReuseRoute
fires. This one is a little odd to me, but if it returnstrue
, then it actually reuses the route you're currently on and none of the other methods are fired. I just return false if the user is navigating away. - If
shouldReuseRoute
returnsfalse
,shouldDetach
fires.shouldDetach
determines whether or not you want to store the route, and returns aboolean
indicating as much. This is where you should decide to store/not to store paths, which I would do by checking an array of paths you want stored againstroute.routeConfig.path
, and returning false if thepath
does not exist in the array. - If
shouldDetach
returnstrue
,store
is fired, which is an opportunity for you to store whatever information you would like about the route. Whatever you do, you'll need to store theDetachedRouteHandle
because that's what Angular uses to identify your stored component later on. Below, I store both theDetachedRouteHandle
and theActivatedRouteSnapshot
into a variable local to my class.
So, we've seen the logic for storage, but what about navigating to a component? How does Angular decide to intercept your navigation and put the stored one in its place?
- Again, after
shouldReuseRoute
has returnedfalse
,shouldAttach
runs, which is your chance to figure out whether you want to regenerate or use the component in memory. If you want to reuse a stored component, returntrue
and you're well on your way! - Now Angular will ask you, "which component do you want us to use?", which you will indicate by returning that component's
DetachedRouteHandle
fromretrieve
.
That's pretty much all the logic you need! In the code for reuse-strategy.ts
, below, I've also left you a nifty function that will compare two objects. I use it to compare the future route's route.params
and route.queryParams
with the stored one's. If those all match up, I want to use the stored component instead of generating a new one. But how you do it is up to you!
reuse-strategy.ts
/**
* reuse-strategy.ts
* by corbfon 1/6/17
*/
import { ActivatedRouteSnapshot, RouteReuseStrategy, DetachedRouteHandle } from '@angular/router';
/** Interface for object which can store both:
* An ActivatedRouteSnapshot, which is useful for determining whether or not you should attach a route (see this.shouldAttach)
* A DetachedRouteHandle, which is offered up by this.retrieve, in the case that you do want to attach the stored route
*/
interface RouteStorageObject {
snapshot: ActivatedRouteSnapshot;
handle: DetachedRouteHandle;
}
export class CustomReuseStrategy implements RouteReuseStrategy {
/**
* Object which will store RouteStorageObjects indexed by keys
* The keys will all be a path (as in route.routeConfig.path)
* This allows us to see if we've got a route stored for the requested path
*/
storedRoutes: { [key: string]: RouteStorageObject } = {};
/**
* Decides when the route should be stored
* If the route should be stored, I believe the boolean is indicating to a controller whether or not to fire this.store
* _When_ it is called though does not particularly matter, just know that this determines whether or not we store the route
* An idea of what to do here: check the route.routeConfig.path to see if it is a path you would like to store
* @param route This is, at least as I understand it, the route that the user is currently on, and we would like to know if we want to store it
* @returns boolean indicating that we want to (true) or do not want to (false) store that route
*/
shouldDetach(route: ActivatedRouteSnapshot): boolean {
let detach: boolean = true;
console.log("detaching", route, "return: ", detach);
return detach;
}
/**
* Constructs object of type `RouteStorageObject` to store, and then stores it for later attachment
* @param route This is stored for later comparison to requested routes, see `this.shouldAttach`
* @param handle Later to be retrieved by this.retrieve, and offered up to whatever controller is using this class
*/
store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
let storedRoute: RouteStorageObject = {
snapshot: route,
handle: handle
};
console.log( "store:", storedRoute, "into: ", this.storedRoutes );
// routes are stored by path - the key is the path name, and the handle is stored under it so that you can only ever have one object stored for a single path
this.storedRoutes[route.routeConfig.path] = storedRoute;
}
/**
* Determines whether or not there is a stored route and, if there is, whether or not it should be rendered in place of requested route
* @param route The route the user requested
* @returns boolean indicating whether or not to render the stored route
*/
shouldAttach(route: ActivatedRouteSnapshot): boolean {
// this will be true if the route has been stored before
let canAttach: boolean = !!route.routeConfig && !!this.storedRoutes[route.routeConfig.path];
// this decides whether the route already stored should be rendered in place of the requested route, and is the return value
// at this point we already know that the paths match because the storedResults key is the route.routeConfig.path
// so, if the route.params and route.queryParams also match, then we should reuse the component
if (canAttach) {
let willAttach: boolean = true;
console.log("param comparison:");
console.log(this.compareObjects(route.params, this.storedRoutes[route.routeConfig.path].snapshot.params));
console.log("query param comparison");
console.log(this.compareObjects(route.queryParams, this.storedRoutes[route.routeConfig.path].snapshot.queryParams));
let paramsMatch: boolean = this.compareObjects(route.params, this.storedRoutes[route.routeConfig.path].snapshot.params);
let queryParamsMatch: boolean = this.compareObjects(route.queryParams, this.storedRoutes[route.routeConfig.path].snapshot.queryParams);
console.log("deciding to attach...", route, "does it match?", this.storedRoutes[route.routeConfig.path].snapshot, "return: ", paramsMatch && queryParamsMatch);
return paramsMatch && queryParamsMatch;
} else {
return false;
}
}
/**
* Finds the locally stored instance of the requested route, if it exists, and returns it
* @param route New route the user has requested
* @returns DetachedRouteHandle object which can be used to render the component
*/
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
// return null if the path does not have a routerConfig OR if there is no stored route for that routerConfig
if (!route.routeConfig || !this.storedRoutes[route.routeConfig.path]) return null;
console.log("retrieving", "return: ", this.storedRoutes[route.routeConfig.path]);
/** returns handle when the route.routeConfig.path is already stored */
return this.storedRoutes[route.routeConfig.path].handle;
}
/**
* Determines whether or not the current route should be reused
* @param future The route the user is going to, as triggered by the router
* @param curr The route the user is currently on
* @returns boolean basically indicating true if the user intends to leave the current route
*/
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
console.log("deciding to reuse", "future", future.routeConfig, "current", curr.routeConfig, "return: ", future.routeConfig === curr.routeConfig);
return future.routeConfig === curr.routeConfig;
}
/**
* This nasty bugger finds out whether the objects are _traditionally_ equal to each other, like you might assume someone else would have put this function in vanilla JS already
* One thing to note is that it uses coercive comparison (==) on properties which both objects have, not strict comparison (===)
* Another important note is that the method only tells you if `compare` has all equal parameters to `base`, not the other way around
* @param base The base object which you would like to compare another object to
* @param compare The object to compare to base
* @returns boolean indicating whether or not the objects have all the same properties and those properties are ==
*/
private compareObjects(base: any, compare: any): boolean {
// loop through all properties in base object
for (let baseProperty in base) {
// determine if comparrison object has that property, if not: return false
if (compare.hasOwnProperty(baseProperty)) {
switch(typeof base[baseProperty]) {
// if one is object and other is not: return false
// if they are both objects, recursively call this comparison function
case 'object':
if ( typeof compare[baseProperty] !== 'object' || !this.compareObjects(base[baseProperty], compare[baseProperty]) ) { return false; } break;
// if one is function and other is not: return false
// if both are functions, compare function.toString() results
case 'function':
if ( typeof compare[baseProperty] !== 'function' || base[baseProperty].toString() !== compare[baseProperty].toString() ) { return false; } break;
// otherwise, see if they are equal using coercive comparison
default:
if ( base[baseProperty] != compare[baseProperty] ) { return false; }
}
} else {
return false;
}
}
// returns true only after false HAS NOT BEEN returned through all loops
return true;
}
}
Behavior
This implementation stores every unique route that the user visits on the router exactly once. This will continue to add to the components stored in memory throughout the user's session on the site. If you'd like to limit the routes that you store, the place to do it is the shouldDetach
method. It controls which routes you save.
Example
Say your user searches for something from the homepage, which navigates them to the path search/:term
, which might appear like www.yourwebsite.com/search/thingsearchedfor
. The search page contains a bunch of search results. You'd like to store this route, in case they want to come back to it! Now they click a search result and get navigated to view/:resultId
, which you do not want to store, seeing as they'll probably be there only once. With the above implementation in place, I would simply change the shouldDetach
method! Here's what it might look like:
First off let's make an array of paths we want to store.
private acceptedRoutes: string[] = ["search/:term"];
now, in shouldDetach
we can check the route.routeConfig.path
against our array.
shouldDetach(route: ActivatedRouteSnapshot): boolean {
// check to see if the route's path is in our acceptedRoutes array
if (this.acceptedRoutes.indexOf(route.routeConfig.path) > -1) {
console.log("detaching", route);
return true;
} else {
return false; // will be "view/:resultId" when user navigates to result
}
}
Because Angular will only store one instance of a route, this storage will be lightweight, and we'll only be storing the component located at search/:term
and not all the others!
Additional Links
Although there's not much documentation out there yet, here are a couple links to what does exist:
Angular Docs: https://angular.io/docs/ts/latest/api/router/index/RouteReuseStrategy-class.html
Intro Article: https://www.softwarearchitekt.at/post/2016/12/02/sticky-routes-in-angular-2-3-with-routereusestrategy.aspx
nativescript-angular's default Implementation of RouteReuseStrategy: https://github.com/NativeScript/nativescript-angular/blob/cb4fd3a/nativescript-angular/router/ns-route-reuse-strategy.ts
Solution 2
Don't be intimidated by the accepted answer, this is pretty straightforward. Here's a quick answer what you need. I would recommend at least reading the accepted answer, as it's full of great detail.
This solution doesn't do any parameter comparison like the accepted answer but it will work fine for storing a set of routes.
app.module.ts imports:
import { RouteReuseStrategy } from '@angular/router';
import { CustomReuseStrategy, Routing } from './shared/routing';
@NgModule({
//...
providers: [
{ provide: RouteReuseStrategy, useClass: CustomReuseStrategy },
]})
shared/routing.ts:
export class CustomReuseStrategy implements RouteReuseStrategy {
routesToCache: string[] = ["dashboard"];
storedRouteHandles = new Map<string, DetachedRouteHandle>();
// Decides if the route should be stored
shouldDetach(route: ActivatedRouteSnapshot): boolean {
return this.routesToCache.indexOf(route.routeConfig.path) > -1;
}
//Store the information for the route we're destructing
store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
this.storedRouteHandles.set(route.routeConfig.path, handle);
}
//Return true if we have a stored route object for the next route
shouldAttach(route: ActivatedRouteSnapshot): boolean {
return this.storedRouteHandles.has(route.routeConfig.path);
}
//If we returned true in shouldAttach(), now return the actual route data for restoration
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
return this.storedRouteHandles.get(route.routeConfig.path);
}
//Reuse the route if we're going to and from the same route
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
return future.routeConfig === curr.routeConfig;
}
}
Solution 3
In the addition to the accepted answer (by Corbfon) and Chris Fremgen's shorter and more straightforward explanation, I want to add a more flexible way of handling routes that should use the reuse strategy.
Both answers store the routes we want to cache in an array and then check if the current route path is in the array or not. This check is done in shouldDetach
method.
I find this approach inflexible because if we want to change the name of the route we would need to remember to also change the route name in our CustomReuseStrategy
class. We may either forget to change it or some other developer in our team may decide to change the route name not even knowing about the existence of RouteReuseStrategy
.
Instead of storing the routes we want to cache in an array, we can mark them directly in RouterModule
using data
object. This way even if we change the route name, the reuse strategy would still be applied.
{
path: 'route-name-i-can-change',
component: TestComponent,
data: {
reuseRoute: true
}
}
And then in shouldDetach
method we make a use of that.
shouldDetach(route: ActivatedRouteSnapshot): boolean {
return route.data.reuseRoute === true;
}
Solution 4
Another implementation more valid, complete and reusable. This one supports lazy loaded modules as @Uğur Dinç and integrate @Davor route data flag. The best improvement is the automatic generation of an (almost) unique identifier based on page absolute path. This way you don't have to define it yourself on every page.
Mark any page that you want to cache setting reuseRoute: true
. It will be used in shouldDetach
method.
{
path: '',
component: MyPageComponent,
data: { reuseRoute: true },
}
This one is the simplest strategy implementation, without comparing query params.
import { ActivatedRouteSnapshot, RouteReuseStrategy, DetachedRouteHandle, UrlSegment } from '@angular/router'
export class CustomReuseStrategy implements RouteReuseStrategy {
storedHandles: { [key: string]: DetachedRouteHandle } = {};
shouldDetach(route: ActivatedRouteSnapshot): boolean {
return route.data.reuseRoute || false;
}
store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
const id = this.createIdentifier(route);
if (route.data.reuseRoute) {
this.storedHandles[id] = handle;
}
}
shouldAttach(route: ActivatedRouteSnapshot): boolean {
const id = this.createIdentifier(route);
const handle = this.storedHandles[id];
const canAttach = !!route.routeConfig && !!handle;
return canAttach;
}
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
const id = this.createIdentifier(route);
if (!route.routeConfig || !this.storedHandles[id]) return null;
return this.storedHandles[id];
}
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
return future.routeConfig === curr.routeConfig;
}
private createIdentifier(route: ActivatedRouteSnapshot) {
// Build the complete path from the root to the input route
const segments: UrlSegment[][] = route.pathFromRoot.map(r => r.url);
const subpaths = ([] as UrlSegment[]).concat(...segments).map(segment => segment.path);
// Result: ${route_depth}-${path}
return segments.length + '-' + subpaths.join('/');
}
}
This one also compare the query params. compareObjects
has a little improvement over @Corbfon version: loop through properties of both base and compare objects. Remember that you can use an external and more reliable implementation like lodash isEqual
method.
import { ActivatedRouteSnapshot, RouteReuseStrategy, DetachedRouteHandle, UrlSegment } from '@angular/router'
interface RouteStorageObject {
snapshot: ActivatedRouteSnapshot;
handle: DetachedRouteHandle;
}
export class CustomReuseStrategy implements RouteReuseStrategy {
storedRoutes: { [key: string]: RouteStorageObject } = {};
shouldDetach(route: ActivatedRouteSnapshot): boolean {
return route.data.reuseRoute || false;
}
store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
const id = this.createIdentifier(route);
if (route.data.reuseRoute && id.length > 0) {
this.storedRoutes[id] = { handle, snapshot: route };
}
}
shouldAttach(route: ActivatedRouteSnapshot): boolean {
const id = this.createIdentifier(route);
const storedObject = this.storedRoutes[id];
const canAttach = !!route.routeConfig && !!storedObject;
if (!canAttach) return false;
const paramsMatch = this.compareObjects(route.params, storedObject.snapshot.params);
const queryParamsMatch = this.compareObjects(route.queryParams, storedObject.snapshot.queryParams);
console.log('deciding to attach...', route, 'does it match?');
console.log('param comparison:', paramsMatch);
console.log('query param comparison', queryParamsMatch);
console.log(storedObject.snapshot, 'return: ', paramsMatch && queryParamsMatch);
return paramsMatch && queryParamsMatch;
}
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
const id = this.createIdentifier(route);
if (!route.routeConfig || !this.storedRoutes[id]) return null;
return this.storedRoutes[id].handle;
}
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
return future.routeConfig === curr.routeConfig;
}
private createIdentifier(route: ActivatedRouteSnapshot) {
// Build the complete path from the root to the input route
const segments: UrlSegment[][] = route.pathFromRoot.map(r => r.url);
const subpaths = ([] as UrlSegment[]).concat(...segments).map(segment => segment.path);
// Result: ${route_depth}-${path}
return segments.length + '-' + subpaths.join('/');
}
private compareObjects(base: any, compare: any): boolean {
// loop through all properties
for (const baseProperty in { ...base, ...compare }) {
// determine if comparrison object has that property, if not: return false
if (compare.hasOwnProperty(baseProperty)) {
switch (typeof base[baseProperty]) {
// if one is object and other is not: return false
// if they are both objects, recursively call this comparison function
case 'object':
if (typeof compare[baseProperty] !== 'object' || !this.compareObjects(base[baseProperty], compare[baseProperty])) {
return false;
}
break;
// if one is function and other is not: return false
// if both are functions, compare function.toString() results
case 'function':
if (typeof compare[baseProperty] !== 'function' || base[baseProperty].toString() !== compare[baseProperty].toString()) {
return false;
}
break;
// otherwise, see if they are equal using coercive comparison
default:
// tslint:disable-next-line triple-equals
if (base[baseProperty] != compare[baseProperty]) {
return false;
}
}
} else {
return false;
}
}
// returns true only after false HAS NOT BEEN returned through all loops
return true;
}
}
If you have a best way to generate unique keys comment my answer, I will update the code.
Thank you to all the guys who shared their solution.
Solution 5
To use Chris Fremgen's strategy with lazily loaded modules, modify CustomReuseStrategy class to the following:
import {ActivatedRouteSnapshot, DetachedRouteHandle, RouteReuseStrategy} from '@angular/router';
export class CustomReuseStrategy implements RouteReuseStrategy {
routesToCache: string[] = ["company"];
storedRouteHandles = new Map<string, DetachedRouteHandle>();
// Decides if the route should be stored
shouldDetach(route: ActivatedRouteSnapshot): boolean {
return this.routesToCache.indexOf(route.data["key"]) > -1;
}
//Store the information for the route we're destructing
store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
this.storedRouteHandles.set(route.data["key"], handle);
}
//Return true if we have a stored route object for the next route
shouldAttach(route: ActivatedRouteSnapshot): boolean {
return this.storedRouteHandles.has(route.data["key"]);
}
//If we returned true in shouldAttach(), now return the actual route data for restoration
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
return this.storedRouteHandles.get(route.data["key"]);
}
//Reuse the route if we're going to and from the same route
shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
return future.routeConfig === curr.routeConfig;
}
}
finally, in your feature modules' routing files, define your keys:
{ path: '', component: CompanyComponent, children: [
{path: '', component: CompanyListComponent, data: {key: "company"}},
{path: ':companyID', component: CompanyDetailComponent},
]}
More info here.
Related videos on Youtube
Anders Gram Mygind
Domino developer Javascript, HTML, REST and all in between
Updated on July 08, 2022Comments
-
Anders Gram Mygind almost 2 years
I have an Angular 2 module in which I have implemented routing and would like the states stored when navigating.
The user should be able to:- search for documents using a 'search formula'
- navigate to one of the results
- navigate back to 'searchresult' - without communicating with the server
This is possible including
RouteReuseStrategy
.
The question is:
How do I implement that the document should not be stored?So the route path "documents"'s state should be stored and the route path "documents/:id"' state should NOT be stored?
-
Anders Gram Mygind over 7 yearsThank you Corbfon for a thorough explanation! It helped me understand the RouteReuseStrategy more. My problem was to NOT store specific routes. I found out,that the function shouldDetach was central and just checked for the length of the current route:
shouldDetach(route: ActivatedRouteSnapshot): boolean { if (route.url.length > 1) { return false; //not stored } else { return true; //stored } }
. Would that not be sufficient to solve my problem? -
Corbfon over 7 yearsHey Anders,
shouldDetach
is indeed where you should make the decision about storing your route. The implementation you have above would store only the root path, since that is the path for which therouter.url.length
array = 0. I would pick a path you want to store, or an array of paths you would like to store, and check the path against that array usingforEach
and theroute.routeConfig.path
property. I'll come back and edit my answer to better answer your question. -
Tjaart van der Walt over 7 years@Corbfon have you tried this on child paths? I have posted a question regarding an error I am receiving: stackoverflow.com/questions/41584664/…
-
Shahin over 7 years@Corbfon that's a great explanation. I still struggle to understand how to change shouldReuseRoute in order to keep state of only one specific route. Please can you give an example?
-
Corbfon over 7 years@shaahin I've added an example, which is the exact code contained in my current implementation!
-
Corbfon over 7 years@TjaartvanderWalt I'm checking out your question now, and will work on an answer! Never tried it with child routes. Your Plunker is awesome, I'd love to link to it! Could you upload the ReuseRouteStrategy above in place of custom-reuse-strategy.ts and add in the code for
shouldDetach
and theacceptedRoutes
array from the newly added example? -
Tjaart van der Walt over 7 years@Corbfon I have updated the plunker with your above code. Feel free to link to the plunker, or event fork it into a new plunker.
-
Tjaart van der Walt over 7 years@Corbfon I have also opened an issue on the official github page: github.com/angular/angular/issues/13869
-
Jinder Sidhu over 7 yearsIs there a way to get it to re-run enter animations when re-activating a stored route?
-
Corbfon over 7 yearsThe ReuseRouteStrategy will hand your component back to the router, so it will be in whatever state it was left in. If you'd like the component(s) to react to the attachment, you may use a service that offers an
Observable
. The component should subscribe to theObservable
during thengOnInit
lifecycle hook. Then you will be able to tell the component, from theReuseRouteStrategy
, that it has just been attached and the component can modify its state as fit. -
Corbfon over 7 years@AndersGramMygind if my answer provides an answer to the question you proposed, would you mark it as the answer?
-
Anders Gram Mygind over 7 years@Corbfon I did not use your answer - I stick with the simple answer I came up with myself - using the method
shouldDetach(route: ActivatedRouteSnapshot): boolean { if (route.url.length > 1) { return false; //not stored } else { return true; //stored } }
I will though give you credit for a thorough explanation of the class. @shaahin can you use my code to solve your problem? -
Свободен Роб over 7 yearsI got error on your example when navigate to View->Edit->Back->View Error: Cannot reattach ActivatedRouteSnapshot created from a different route infinit.io/_/3fNskFR
-
Corbfon over 7 years@СвободенРоб were you looking at the Plunker or running the example code? This is a known issue with child routing (that Plunker was made as an example of that issue). I'm working on a fix, and will update this code when I've got it
-
Свободен Роб over 7 years@Corbfon, yes I was running Plunker Demo. I have the same problem as mentioned here: stackoverflow.com/questions/39409756/… Do you have idea how can I solve it ?
-
Corbfon over 7 years@СвободенРоб yes, we need to find a better "key" to map our strategy off of than
route.routeConfig.path
. Either that, or design a more complex way of handling that logic. The current system allows the router to attempt attaching a parent's child route in place of a different child route, which throws the error. -
James Hancock almost 7 yearsHow would one use this to scroll to the top if not in the back history? (and properly scroll to anchors?
-
Corbfon almost 7 yearsWould you mind being a little more specific about the use case? Maybe write it like a user story?
-
jbgarr almost 7 years@Corbfon Did you ever figure out how to handle child routes? I've got a fairly complex routing scheme with lazy loaded child routes, and am having a hard time getting the caching to work as expected.
-
Corbfon almost 7 years@jbgarr unfortunately not yet. I haven't had the time at work to dig around in more complex
shouldAttach
andshouldDetach
logic. I think the Router we're dealing with here is a little more complex than needbe, but essentially someone just needs to write an interface to peel it apart and make a better decision on what to detach and store -
Tarida George over 6 years"If you'd like the component(s) to react to the attachment, you may use a service that offers an Observable" @Corbfon I created a service called MessageService and I tried to inject it in my CustomReuseStrategy but I get this error : Can't resolve all parameters for CustomReuseStrategy: (?) and I think that this is because the service is not yet available. What do you think about this ?
-
Tarida George over 6 yearsSolved by adding [deps] : [MessageService] to providers child object.
-
Splaktar over 6 yearsI just wanted to add a note that this
RouteReuseStrategy
API is marked Experimental. It could be removed or see significant breaking changes in a future Angular release. -
bluePearl over 6 years@TGeorge did this solve you problem regarding the
Cannot reattach ActivatedRouteSnapshot created from a different route
error? -
bluePearl over 6 yearsWill this also work for routes that are lazy loaded?
-
Corbfon over 6 years@bluePearl I think TGeorge was dealing with a service provider issue. Do you have child routes in your application that you're attempting to detach/re-attach? If so, this strategy has caused issues, as it only checks the url and does not crawl the route tree in order to determine child routing. You'd need to write a more sophisticated handler to detach/store/attach the correct child routes.
-
Corbfon over 6 yearsThanks for adding this! I've got to give it a try. It could even fix some of the child route handling issues that my solution runs into.
-
bluePearl over 6 yearsI had to use
route.data["key"]
to build without error. But the issue i am having is that i have a route+component that is used in two different places.1. sample/list/item
and2. product/id/sample/list/item
when i first load either of the paths it loads fine but the other throws the reattached error because i am storing based onlist/item
So my work around is i duplicated the route and made some change to the url path but displaying the same component. Not sure if there is another work around for that. -
Gil Epshtain almost 6 yearsrouteConfig is null, for different routes, therefore shouldReuseRoute will always return true which isn't the desired behavior
-
DarkNeuron over 5 yearsCareful, this uses an internal variable
_routerState
. -
k11k2 over 5 years@DarkNeuron does
_routerState
cause any harmful ? -
DarkNeuron over 5 yearsNo, but Google is under no obligation to keep that variable around, since it's used internally and not exposed in the API.
-
k11k2 over 5 yearswhen we are calling
deleteRouteSnapshot
? -
MIP1983 over 4 yearsThis kind of confused me, the above just wouldn't work, it would blow up as soon as I hit one of my cache routes, (it would no longer navigate and there where errors in the console). Chris Fremgen's solution seems to work fine with my lazy modules as far as I can tell so far...
-
MIP1983 over 4 yearsGood solution. This should really just be baked into the standard angular route reuse strategy with a simple flag like you've applied.
-
zhuhang.jasper over 4 yearsThis should be the accepted answer. Many solution provided above cannot support multiple pages with same child URL. Because they are comparing the activatedRoute URL, which is not the full path.
-
Raphael St about 4 yearsI think there is a typo for shouldReuseRoute() comments: @returns boolean basically indicating true if the user intends to leave the current route. It is the other way around, or did I get it wrong ? It should be "if the user intends to remain on the current route"
-
Jeppe about 4 years"AND the component renders, by default, in the same state it was left" Would be cool if you could return to the state after
ngOnInit
. -
Corbfon about 4 years@Jeppe all you have to do in order to return to that state is NOT mount the component in your mounting logic
-
claudiomatiasrg almost 4 yearsGreat answer. Thank you very much!
-
Andrew Prock almost 4 yearsJust linking to your own library or tutorial is not a good answer. Linking to it, explaining why it solves the problem, providing code on how to do so and disclaiming that you wrote it makes for a better answer. See: What signifies “Good” self promotion?
-
WasiF almost 3 yearsYour solution deserves thumbs up :)
-
juan_carlos_yl almost 3 yearsGreat solution! Just to mention, if you want to delete stored components when the user signs out you could do something like this in the
shouldAttach
hookif (route.component === AuthComponent ){ this.storedHandles = {}; return false; }
-
CodeFinity almost 3 yearsThis doesn't work with a
{path: ''}
. Got really frustrated 😖 - then realized 🙄 can'tset
inMap
with''
. 😃 -
CodeFinity almost 3 yearsNow, the only issue is how to get
params
, for example,something/:id
. How to getid
in here and reuse dynamic components? -
Zain Ul Abidin over 2 yearsfinally i found an answer that can be implimented in 2 mins without digging into the what's and why's of the angular . lolz .
-
Aakash Goplani over 2 yearsIf I have configuration like
{ path: '', component: UsersComponent, children: [ { path: ':id', component: UserComponent, data: { reuseRoute: true } } ] }
in this case UserComponent is cached in scenario/user/1 -> /users -> /user/2
which is expected, but when it will be destroyed? Even if I try to move away from parent UsersComponent/users -> /something-else
, that route is still active. So I just want to understand like when it would be destroyed? -
albanx about 2 years
shouldReuseRoute
return true => if you do not want to kick the reuse route strategy, return false => kick the other methods to understand if we have to store/retrive