Angular Academy · Les

Resolvers en routedata

Laad gegevens voorafgaand aan het activeren van een route

Les 2 van 413 stappen

Resolvers en routedata is een gratis Angular Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Angular Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Angular Academy bevat in totaal 4 lessen.

Wat is een resolver

Een resolver haalt gegevens op voordat een route wordt geactiveerd, zodat het component wordt weergegeven terwijl de gegevens al beschikbaar zijn — zonder flitsende laadstatus in het component zelf.

Statische routegegevens

Met de eigenschap data koppel je statische waarden aan een route. Je kunt deze lezen via ActivatedRoute.data.

export const routes = [
  { path: 'admin', component: AdminComponent,
    data: { title: 'Admin Panel', roles: ['admin'] } }
];

Routegegevens lezen

route.data is een observable van het samengevoegde gegevensobject.

route.data.subscribe(d => {
  console.log(d['title']); // Admin Panel
});

Functionele resolver: ResolveFn

Modern Angular gebruikt ResolveFn — een gewone functie die de gegevens retourneert (of een observable of promise daarvan).

import { ResolveFn } from '@angular/router';
import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

export const userResolver = (route) => {
  const http = inject(HttpClient);
  return http.get('/api/user/' + route.paramMap.get('id'));
};

De resolver aan een route koppelen

Koppel resolvers onder de sleutel resolve. Het resultaat komt onder die sleutel in route.data terecht.

export const routes = [
  { path: 'user/:id', component: UserComponent,
    resolve: { user: userResolver } }
];

Opgeloste gegevens gebruiken

Lees de opgeloste waarde via de bijbehorende sleutel uit route.data.

route.data.subscribe(d => {
  this.user = d['user']; // already loaded
});

Opgeloste gegevens via invoerkoppeling

Met withComponentInputBinding() worden opgeloste sleutels automatisch gekoppeld aan overeenkomende componentinvoer.

export class UserComponent {
  @Input() user!: User; // from resolve: { user: ... }
}

Resolvers en timing van navigatie

De router wacht tot de observable van de resolver is voltooid (of de promise is afgehandeld) voordat de route wordt geactiveerd. Een resolver die nooit voltooit, blokkeert de navigatie.

Fouten in resolvers afhandelen

Als een resolver een fout bevat, wordt de navigatie geannuleerd. Vang fouten binnen de resolver af om door te sturen of een terugvalwaarde te retourneren.

export const userResolver = (route) => {
  const http = inject(HttpClient);
  const router = inject(Router);
  return http.get('/api/user/' + route.paramMap.get('id')).pipe(
    catchError(() => { router.navigate(['/404']); return EMPTY; })
  );
};

Wanneer resolvers gebruiken

Gebruik resolvers voor gegevens die aanwezig moeten zijn voordat de pagina wordt weergegeven. Voor gegevens die stapsgewijs kunnen worden geladen, is het vaak beter voor de gebruikerservaring om ze in het component op te halen (met een laadstatus). Blokkeer de navigatie niet voor trage, optionele gegevens.

Titelstrategie

De router heeft een ingebouwde route-eigenschap title en TitleStrategy om de documenttitel in te stellen, vaak in combinatie met opgeloste gegevens.

export const routes = [
  { path: 'about', component: AboutComponent, title: 'About Us' }
];

Korte controle

Test je begrip van resolvers.

Beantwoord dit in de interactieve les

Samenvatting: resolvers en routegegevens

Resolvers laden gegevens voorafgaand aan de activatie.

data: statische routewaarden.
ResolveFn + resolve: dynamische vooraf opgehaalde gegevens in route.data.
De router wacht op voltooiing; handel fouten af om geblokkeerde navigatie te voorkomen.

Volgende: functionele routebewakers.

Gratis beginnen

Leer HTML met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 38
Lessen: 144

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Resolvers en routedata” gratis?

Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “Resolvers en routedata”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Angular Academy bevat in totaal 4 lessen.

Wat leer ik in “Resolvers en routedata”?

Laad gegevens voorafgaand aan het activeren van een route Je oefent met Angular Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met Angular Academy te beginnen?

Ervaring vooraf is niet nodig. Angular Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “Resolvers en routedata”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over Angular Academy?

Ja. Elke les over Angular Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar Angular Academy