Angular Academy · Урок

Параметры маршрутов и параметры запросов

Читайте параметры маршрута и реагируйте на них

«Параметры маршрутов и параметры запросов» — бесплатный урок Angular Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Angular Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Angular Academy содержит 4 уроков всего.

Параметры маршрута и параметры запроса

Параметры маршрута являются частью пути (/user/42). Параметры запроса добавляются после ? (/search?q=ng&page=2). Маршрутизатор предоставляет реактивный доступ к обоим типам параметров.

Определение параметра маршрута

Используйте двоеточие в пути, чтобы объявить параметр.

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

Чтение параметров с помощью paramMap

ActivatedRoute.paramMap — это наблюдаемая последовательность, выдающая значение при каждом изменении параметров маршрута. Используйте .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);
});

Зачем наблюдать за параметрами

При переходе с /user/1 на /user/2 компонент может быть повторно использован. Конструктор запускается один раз, но paramMap выдаёт новое значение — поэтому подпишитесь на него, чтобы реагировать на изменение.

Снимок для однократного чтения

Если компонент никогда не используется повторно с другим параметром, снимок можно прочитать синхронно.

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

Параметры запроса с queryParamMap

queryParamMap предоставляет значения строки запроса также в виде наблюдаемой последовательности.

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

Переход с параметрами запроса

Используйте параметр queryParams в router.navigate или директиве routerLink.

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

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

Сохранение параметров запроса

queryParamsHandling: 'merge' сохраняет существующие параметры при обновлении некоторых из них; 'preserve' переносит их при переходе.

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

Привязка входных параметров компонента (современный подход)

С помощью withComponentInputBinding() параметры маршрута и запроса можно напрямую привязать к @Input() компонента (или к сигналам ввода), не используя ActivatedRoute.

// in provideRouter(routes, withComponentInputBinding())

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

getAll для повторяющихся параметров

Используйте getAll(), если ключ запроса может встречаться несколько раз, например ?tag=a&tag=b.

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

Объединение параметров с загрузкой данных

Распространённый шаблон: преобразуйте параметр в HTTP-вызов с помощью switchMap, чтобы при изменении идентификатора данные загружались снова.

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

Быстрая проверка

Проверьте, насколько хорошо Вы понимаете параметры маршрута.

Повторение: параметры маршрута и запроса

Маршрутизатор предоставляет реактивный доступ к параметрам.

paramMap: параметры пути, за которыми следует наблюдать при повторном использовании компонента.
queryParamMap: строка запроса, с getAll для повторяющихся параметров.
snapshot для однократного чтения.
withComponentInputBinding() привязывает параметры к входным параметрам.

Далее: разрешение данных и данные маршрута.

Часто задаваемые вопросы

Урок «Параметры маршрутов и параметры запросов» бесплатный?

Да — полный текст урока «Параметры маршрутов и параметры запросов» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Angular Academy, подпишись на CoddyKit PRO. Курс Angular Academy содержит 4 уроков всего.

Чему я научусь в уроке «Параметры маршрутов и параметры запросов»?

Читайте параметры маршрута и реагируйте на них Ты практикуешь Angular Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Angular Academy?

Предыдущий опыт не требуется. Angular Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Параметры маршрутов и параметры запросов»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Angular Academy?

Да. Каждый урок Angular Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

Параметры маршрутов и параметры запросов
Резолверы и данные маршрута
Функциональные защитники маршрутов
События маршрутизатора и навигация

← Назад к Angular Academy