javascript / expert
Snippet
Benutzerdefinierte Route-Reuse-Strategie für domänenspezifisches Caching
Die RouteReuseStrategy ermöglicht eine feingranulare Kontrolle über die Zerstörung von Komponenten während der Navigation. Durch die Implementierung dieses Interfaces können ganze Komponentenbäume (DetachedRouteHandle) basierend auf benutzerdefinierter Logik zwischengespeichert werden, um die Neuinitialisierung komplexer Ansichten zu verhindern.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
import { RouteReuseStrategy, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';export class CustomCacheStrategy implements RouteReuseStrategy {private handles = new Map<string, DetachedRouteHandle>();shouldDetach(route: ActivatedRouteSnapshot): boolean {return route.data['keepAlive'] === true;}store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {this.handles.set(route.routeConfig!.path!, handle);}shouldAttach(route: ActivatedRouteSnapshot): boolean {return !!this.handles.get(route.routeConfig!.path!);}retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle | null {return this.handles.get(route.routeConfig!.path!) || null;}shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {return future.routeConfig === curr.routeConfig;}}
angular
Erklärung
1
shouldDetach(route: ActivatedRouteSnapshot): boolean
Bestimmt, ob eine Route zur späteren Verwendung gespeichert werden soll, anstatt sie zu zerstören.
2
store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle)
Speichert den losgelösten Komponentenbaum in einem lokalen Cache (meist eine Map).
3
shouldReuseRoute(future, curr)
Entscheidet, ob der Router dieselbe Komponente verwenden soll, wenn zwischen zwei Routen gewechselt wird.