javascript / intermediate
Snippet
Route-Resolver zum Vorabrufen von Daten
Resolver ermöglichen es, Daten abzurufen, bevor eine Route aktiviert wird. Dies verhindert, dass die Komponente in einem unvollständigen Zustand lädt, und verbessert die Benutzererfahrung, indem 'Flackern' beim Warten auf asynchrone Anfragen vermieden wird.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
export const heroResolver: ResolveFn<Hero> = (route: ActivatedRouteSnapshot) => {const id = route.paramMap.get('id')!;return inject(HeroService).getHero(id);};// In app.routes.ts{path: 'hero/:id',component: HeroComponent,resolve: { hero: heroResolver }}
angular
Erklärung
1
export const heroResolver: ResolveFn<Hero>
Definiert einen funktionalen Resolver, der ein Observable, Promise oder einen direkten Wert zurückgibt.
2
resolve: { hero: heroResolver }
Ordnet die Resolver-Ausgabe dem Schlüssel 'hero' im Datenobjekt der Route zu.