Angular Academy · Урок

Резолверы и данные маршрута

Загружайте данные до активации маршрута

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

Что такое разрешение данных

Механизм разрешения заранее загружает данные до активации маршрута, поэтому компонент отображается уже с доступными данными — без мигания состояния загрузки внутри самого компонента.

Статические данные маршрута

Свойство data добавляет к маршруту статические значения, доступные через ActivatedRoute.data.

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

Чтение данных маршрута

route.data — это наблюдаемая последовательность с объединённым объектом данных.

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

Функциональный механизм разрешения: ResolveFn

В современном Angular используется ResolveFn — обычная функция, возвращающая данные (или наблюдаемую последовательность либо обещание с ними).

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

Подключение механизма разрешения к маршруту

Укажите механизмы разрешения в ключе resolve. Результат попадёт в route.data по этому ключу.

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

Использование разрешённых данных

Прочитайте разрешённое значение из route.data по его ключу.

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

Разрешённые данные через привязку входных параметров

С помощью withComponentInputBinding() разрешённые ключи автоматически привязываются к соответствующим входным параметрам компонента.

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

Механизмы разрешения и время перехода

Маршрутизатор ждёт, пока наблюдаемая последовательность механизма разрешения завершится (или пока будет выполнено обещание), прежде чем активировать маршрут. Механизм разрешения, который никогда не завершается, блокирует переход.

Обработка ошибок механизма разрешения

Если механизм разрешения выдаёт ошибку, переход отменяется. Перехватывайте ошибки внутри механизма разрешения, чтобы перенаправить пользователя или вернуть запасной вариант.

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

Когда использовать механизмы разрешения

Используйте механизмы разрешения для данных, которые должны быть доступны до отображения страницы. Если данные можно загружать постепенно, часто лучше загружать их в компоненте с отображением состояния загрузки. Не блокируйте переход из-за медленных необязательных данных.

Стратегия заголовка

Маршрутизатор имеет встроенное свойство маршрута title и TitleStrategy для установки заголовка документа, часто в сочетании с разрешёнными данными.

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

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

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

Повторение: механизмы разрешения и данные маршрута

Механизмы разрешения предварительно загружают данные до активации.

data: статические значения маршрута.
ResolveFn + resolve: динамическая предварительная загрузка в route.data.
Маршрутизатор ждёт завершения; обрабатывайте ошибки, чтобы переход не блокировался.

Далее: функциональные защитники маршрутов.

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

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

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

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

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

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

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

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

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

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

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

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

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

← Назад к Angular Academy