Angular Academy · Lekcja

Resolvery i dane tras

Wstępnie ładować dane przed aktywacją trasy

Resolvery i dane tras to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Angular Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Angular Academy zawiera 4 lekcji w sumie.

Czym jest resolver

Resolver pobiera dane przed aktywacją ścieżki, dzięki czemu komponent jest renderowany z już dostępnymi danymi — bez wyświetlania stanu ładowania wewnątrz komponentu.

Statyczne dane ścieżki

Właściwość data dołącza statyczne wartości do ścieżki, które można odczytać za pomocą ActivatedRoute.data.

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

Odczytywanie danych ścieżki

route.data to obserwowalny zawierający połączony obiekt danych.

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

Resolver funkcyjny: ResolveFn

Współczesny Angular korzysta z ResolveFn — zwykłej funkcji, która zwraca dane (lub obserwowalny albo promise z tymi danymi).

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'));
};

Podłączanie resolvera do ścieżki

Resolvery należy dołączyć pod kluczem resolve. Wynik trafia do route.data pod tym kluczem.

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

Korzystanie z rozwiązanych danych

Rozwiązaną wartość należy odczytać z route.data za pomocą jej klucza.

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

Rozwiązane dane przez wiązanie danych wejściowych

Dzięki withComponentInputBinding() rozwiązane klucze są automatycznie wiązane z pasującymi danymi wejściowymi komponentu.

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

Resolvery a czas nawigacji

Router czeka, aż obserwowalny resolvera zakończy działanie (lub promise zostanie rozstrzygnięty), zanim aktywuje ścieżkę. Resolver, który nigdy się nie kończy, blokuje nawigację.

Obsługa błędów resolvera

Jeśli resolver zakończy się błędem, nawigacja zostaje anulowana. Błędy należy przechwytywać wewnątrz resolvera, aby przekierować użytkownika lub zwrócić wartość zastępczą.

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; })
  );
};

Kiedy używać resolverów

Resolverów należy używać w przypadku danych, które muszą być dostępne przed wyświetleniem strony. Dane, które mogą być ładowane stopniowo, często lepiej pobierać w komponencie (ze stanem ładowania), aby zapewnić lepsze wrażenia użytkownika. Nie należy blokować nawigacji powolnymi, opcjonalnymi danymi.

Strategia tytułu

Router ma wbudowaną właściwość ścieżki title oraz klasę TitleStrategy do ustawiania tytułu dokumentu, często w połączeniu z rozwiązanymi danymi.

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

Szybki test

Sprawdź swoją wiedzę na temat resolverów.

Podsumowanie: resolvery i dane ścieżki

Resolvery wstępnie ładują dane przed aktywacją ścieżki.

data: statyczne wartości ścieżki.
ResolveFn + resolve: dynamiczne wstępne pobieranie danych do route.data.
Router czeka na zakończenie działania; należy obsługiwać błędy, aby uniknąć zablokowanej nawigacji.

Następnie: funkcyjne strażniki ścieżek.

Często zadawane pytania

Czy lekcja „Resolvery i dane tras” jest bezpłatna?

Tak — pełny tekst „Resolvery i dane tras” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Angular Academy, przejdź na CoddyKit PRO. Kurs Angular Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Resolvery i dane tras”?

Wstępnie ładować dane przed aktywacją trasy Ćwiczysz Angular Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Angular Academy?

Nie wymagamy żadnego doświadczenia. Angular Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Resolvery i dane tras”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Angular Academy?

Tak. Każda lekcja Angular Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do Angular Academy