javascript / expert
Snippet
Typsichere Routenparameter-Extraktion mit Resolvern
Funktionale Resolver ersetzen das veraltete klassenbasierte Resolve-Interface und erlauben es, mit inject() Abhängigkeiten direkt innerhalb einer einfachen Funktion abzurufen, die der Routenkonfiguration übergeben wird. Dieses Beispiel schützt vor fehlerhaften Routenparametern, bevor die Service-Schicht erreicht wird, sodass die Komponente stets ein validiertes Product oder null erhält, statt Ad-hoc-Parsing in ngOnInit durchzuführen. Da der Resolver vor der Aktivierung läuft, kann das Komponenten-Template davon ausgehen, dass die Daten über die aufgelösten Routendaten bereits vorliegen, was Ladezustand-Flackern bei dieser Navigation vermeidet.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { ResolveFn, ActivatedRouteSnapshot } from '@angular/router';import { inject } from '@angular/core';import { ProductService } from './product.service';import { Product } from './product.model';export const productResolver: ResolveFn<Product | null> = (route: ActivatedRouteSnapshot) => {const service = inject(ProductService);const id = route.paramMap.get('id');if (!id || !/^[0-9]+$/.test(id)) {return null;}return service.getById(Number(id));};// Route config:// { path: 'product/:id', component: ProductDetail, resolve: { product: productResolver } }
angular
Erklärung
1
export const productResolver: ResolveFn<Product | null> = (route) => {
Definiert einen funktionalen Resolver, typisiert mit ResolveFn, der den aktivierten Routen-Snapshot erhält, statt eine Klasse mit Resolve-Implementierung zu benötigen.
2
const service = inject(ProductService);
Verwendet inject() im Funktionskörper, um auf den DI-Container zuzugreifen, ohne Konstruktor-Injection, da es sich nicht um eine Klasse handelt.
3
if (!id || !/^[0-9]+$/.test(id)) { return null; }
Validiert die Form des Routenparameters vor jedem Service-Aufruf und verhindert, dass fehlerhafte IDs das Backend erreichen.