Angular Academy · Lekcja

Parametry tras i parametry zapytań

Odczytywać parametry tras i reagować na nie

Parametry tras i parametry zapytań to bezpłatna lekcja Angular Academy na CoddyKit. To lekcja 1 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.

Parametry ścieżki a parametry zapytania

Parametry ścieżki są częścią ścieżki (/user/42). Parametry zapytania są dołączane po znaku ? (/search?q=ng&page=2). Router zapewnia reaktywny dostęp do obu rodzajów parametrów.

Definiowanie parametru ścieżki

Aby zadeklarować parametr w ścieżce, należy użyć dwukropka.

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

Odczytywanie parametrów za pomocą paramMap

ActivatedRoute.paramMap to obserwowalny, który emituje wartości za każdym razem, gdy zmienią się parametry ścieżki. Do odczytania wartości należy użyć .get().

import { inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

const route = inject(ActivatedRoute);
route.paramMap.subscribe(params => {
  const id = params.get('id');
  console.log('user id', id);
});

Dlaczego warto obserwować parametry

Przejście z /user/1 do /user/2 może ponownie wykorzystać komponent. Konstruktor uruchamia się raz, ale paramMap emituje ponownie — dlatego należy subskrybować ten obserwowalny, aby reagować na zmianę.

Migawka do jednorazowego odczytu

Jeśli komponent nigdy nie jest ponownie używany z innym parametrem, można synchronicznie odczytać migawkę.

const id = route.snapshot.paramMap.get('id');
// only valid if the route param will not change
// while this component instance is alive

Parametry zapytania za pomocą queryParamMap

queryParamMap udostępnia wartości z ciągu zapytania, również jako obserwowalny.

route.queryParamMap.subscribe(qp => {
  const page = Number(qp.get('page') ?? '1');
  const q = qp.get('q') ?? '';
  console.log(q, page);
});

Nawigowanie z parametrami zapytania

Należy użyć opcji queryParams w router.navigate lub dyrektywie routerLink.

import { Router } from '@angular/router';
const router = inject(Router);

router.navigate(['/search'], {
  queryParams: { q: 'angular', page: 2 }
});

Zachowywanie parametrów zapytania

queryParamsHandling: 'merge' zachowuje istniejące parametry podczas aktualizowania wybranych; 'preserve' przenosi je podczas nawigacji.

router.navigate(['/search'], {
  queryParams: { page: 3 },
  queryParamsHandling: 'merge'
});

Wiązanie danych wejściowych komponentu (nowoczesne)

Dzięki withComponentInputBinding() parametry ścieżki i zapytania można bezpośrednio powiązać z @Input() komponentu (lub z sygnałami wejściowymi), pomijając ActivatedRoute.

// in provideRouter(routes, withComponentInputBinding())

export class UserComponent {
  @Input() id!: string; // bound from /user/:id
}

getAll dla powtarzających się parametrów

Należy użyć getAll(), gdy klucz zapytania może wystąpić wiele razy, na przykład ?tag=a&tag=b.

route.queryParamMap.subscribe(qp => {
  const tags = qp.getAll('tag'); // ['a', 'b']
  console.log(tags);
});

Łączenie parametrów z ładowaniem danych

Typowy wzorzec polega na przekształceniu parametru w wywołanie HTTP za pomocą switchMap, aby zmiana identyfikatora powodowała ponowne pobranie danych.

route.paramMap.pipe(
  switchMap(p => this.http.get('/api/user/' + p.get('id')))
).subscribe(user => console.log(user));

Szybki test

Sprawdź swoją wiedzę na temat parametrów ścieżki.

Podsumowanie: parametry ścieżki i zapytania

Router udostępnia parametry w sposób reaktywny.

paramMap: parametry ścieżki, które należy obserwować w przypadku ponownego użycia komponentu.
queryParamMap: ciąg zapytania, z getAll do obsługi powtórzeń.
snapshot do jednorazowych odczytów.
withComponentInputBinding() wiąże parametry z danymi wejściowymi.

Następnie: resolvery i dane ścieżki.

Często zadawane pytania

Czy lekcja „Parametry tras i parametry zapytań” jest bezpłatna?

Tak — pełny tekst „Parametry tras i parametry zapytań” 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 „Parametry tras i parametry zapytań”?

Odczytywać parametry tras i reagować na nie Ć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 1 z 4.

Ile czasu zajmuje lekcja „Parametry tras i parametry zapytań”?

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