docs: correct example for RouteReuseStrategy getRouteKey

Update the example to properly demonstrate the getRouteKey method usage fixes #65021

(cherry picked from commit a48029b810)
This commit is contained in:
SkyZeroZx 2025-11-09 15:56:04 -05:00 committed by Jessica Janiuk
parent 16f2c5529a
commit dc11db1f37

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: