I am using this example as a starting point.
My configuration is something like this:
editor.module
:
....
import { editorRoutingModule } from './editor-routing.module';
import { RouteReuseStrategy } from '@angular/router';
import { myRouteReuseStrategy } from './my-route-reuse-strategy';
....
providers: [
{
provide: RouteReuseStrategy,
useClass: AWARouteReuseStrategy
},
service1, service2, .... ],
editor-routing.module
:
const routes: Routes = [
{
path: '',
component: editorComponent,
resolve: { model: "resolver" },
data: { resolvedata: 'Home' },
children: [
{
path: 'asset/',
component: assetComponent,
resolve: { model: "resolver" },
data: { resolvedata: 'Assets' },
},
{
path: 'tags/:tags',
component: tagsComponent,
resolve: { model: "resolver" },
data: { resolvedata: 'Tags' },
},
....
],
},
{ path: '**', redirectTo: 'asset/' },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
providers: [],
})
editor main component:
<editor-navigation-tree></editor-navigation-tree>
<router-outlet></router-outlet>
myRouteReuseStrategy
is exactly the same as in the provided sample project.
Navigation is done by the tree when a node is selected. There is quite a lot of code, so I'm not sure what else to show.
When I run it, it's not going into the route reuse strategy code at all.
I faced this issue before, the RouterReuseStrategy must be placed on the root module (app.module.ts
) only then it will work, you can narrow down its effect by check the URL matches the module/component so that it only affects these areas.
....
import { editorRoutingModule } from './editor-routing.module';
import { RouteReuseStrategy } from '@angular/router';
import { myRouteReuseStrategy } from './my-route-reuse-strategy';
....
providers: [
{
provide: RouteReuseStrategy,
useClass: AWARouteReuseStrategy
},
service1, service2, .... ],