I have two components called A,B. I need form data of component B when re-routed back from component A. So, I have implemented RouterReuseStrategy. But, it works fine only for router without params but failed to retrieve the form data for router with params.
router-strategy.ts
import {RouteReuseStrategy,ActivatedRouteSnapshot,DetachedRouteHandle,} from '@angular/router';
export class CustomRouteReuseStrategy implements RouteReuseStrategy {
private routeLeftFrom: string | undefined;
private handlers: { [key: string]: DetachedRouteHandle } = {};
shouldDetach(route: ActivatedRouteSnapshot): boolean {
this.routeLeftFrom = route.routeConfig!.path;
return route.data['shouldReuseRoute'] || false;
}
store(route: ActivatedRouteSnapshot, handler: DetachedRouteHandle): void {
console.log('[router-reuse] storing handler');
if (handler) {
this.handlers[this.getUrl(route)] = handler;
}
}
shouldAttach(route: ActivatedRouteSnapshot): boolean {
var wasRoutePreviouslyDetached =
!!this.handlers[route.url.join('/') || route.parent!.url.join('/')];
if (wasRoutePreviouslyDetached) {
var reuseRouteFromVerified =
route.data['reuseRoutesFrom'].indexOf(this.routeLeftFrom) > -1;
if (reuseRouteFromVerified) {
return true;
}
}
return false;
}
retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {
if (!route.routeConfig || route.routeConfig.loadChildren) {
return null;
}
return this.handlers[this.getUrl(route)];
}
shouldReuseRoute(future: ActivatedRouteSnapshot,current: ActivatedRouteSnapshot): boolean {
let reUseUrl = false;
if (future.routeConfig) {
if (future.routeConfig.data) {
reUseUrl = future.routeConfig.data['reuse'];
}
}
const defaultReuse = future.routeConfig === current.routeConfig;
return reUseUrl || defaultReuse;
}
getUrl(route: ActivatedRouteSnapshot): string {
if (route.routeConfig) {
const url = route.routeConfig.path;
console.log('[router-reuse] returning url', url);
return url as string;
}
throw new Error('Route configuration is missing for the provided route.');
}
}
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {
MatButtonModule,
MatCheckboxModule,
MatInputModule,
MatSelectModule,
MatDatepickerModule,
MatNativeDateModule,
} from '@angular/material';
import { PageAComponent } from './page-a/page-a.component';
import { PageBComponent } from './page-b/page-b.component';
import { PageCComponent } from './page-c/page-c.component';
import { RouteReuseStrategy, RouterModule, Routes } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { CustomRouteReuseStrategy } from './router-strategy';
export let browserRefresh = false;
const appRoutes: Routes = [
{ path: 'a', component: PageAComponent },
// {
// path: 'b',
// component: PageBComponent,
// data: {
// shouldReuseRoute: true,
// reuseRoutesFrom: ['a'],
// },
// },
{
path: 'b/:userID',
component: PageBComponent,
data: {
shouldReuseRoute: true,
reuseRoutesFrom: ['a'],
},
},
];
@NgModule({
imports: [
BrowserModule,
FormsModule,
BrowserAnimationsModule,
ReactiveFormsModule,
MatButtonModule,
MatCheckboxModule,
MatInputModule,
MatSelectModule,
MatDatepickerModule,
MatNativeDateModule,
RouterModule.forRoot(appRoutes),
HttpClientModule,
],
declarations: [AppComponent, PageAComponent, PageBComponent, PageCComponent],
bootstrap: [AppComponent],
providers: [
{
provide: RouteReuseStrategy,
useClass: CustomRouteReuseStrategy,
},
],
})
export class AppModule {}
Attaching Stackblitz for ref.
Solution I am looking for: Need form data(in component B) after re-route from component A.The route should be with params.
