docs: correct example for RouteReuseStrategy getRouteKey

Update the example to properly demonstrate the getRouteKey method usage fixes #65021
This commit is contained in:
SkyZeroZx 2025-11-09 15:56:04 -05:00 committed by Jessica Janiuk
parent fc5710bb7f
commit a48029b810

View file

@ -160,12 +160,12 @@ The `RouteReuseStrategy` class provides five methods that control the lifecycle
The following example demonstrates a custom route reuse strategy that selectively preserves component state based on route metadata:
```ts
import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';
import { RouteReuseStrategy, Route, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';
import { Injectable } from '@angular/core';
@Injectable()
export class CustomRouteReuseStrategy implements RouteReuseStrategy {
private handlers = new Map<string, DetachedRouteHandle>();
private handlers = new Map<Route | null, DetachedRouteHandle>();
shouldDetach(route: ActivatedRouteSnapshot): boolean {
// Determines if a route should be stored for later reuse
@ -197,12 +197,14 @@ export class CustomRouteReuseStrategy implements RouteReuseStrategy {
return future.routeConfig === curr.routeConfig;
}
private getRouteKey(route: ActivatedRouteSnapshot): string {
return route.routeConfig ?? '';
private getRouteKey(route: ActivatedRouteSnapshot): Route | null {
return route.routeConfig;
}
}
```
NOTE: Avoid using the route path as the key when `canMatch` guards are involved, as it may lead to duplicate entries.
### Configuring a route to use a custom route reuse strategy
Routes can opt into reuse behavior through route configuration metadata. This approach keeps the reuse logic separate from component code, making it easy to adjust behavior without modifying components: