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.
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 } }
