Как проложить маршрут в Angular - Изучение Angular (Часть 5)

YOUTUBE · 23.11.2025 05:53

Ключевые темы и таймкоды

Введение в маршрутизацию

0:02
  • Маршрутизация позволяет пользователям переходить между компонентами приложения.
  • В Angular используется маршрутизатор для навигации.
  • Для изучения объекта недвижимости создается компонент сведений.

Настройка маршрутизации

0:33
  • Включаем маршрутизацию в приложении, импортируя маршрутизатор из angular router.
  • Добавляем функцию provide router в массив providers.
  • Создаем пустой массив маршрутов для определения путей.

Создание маршрутов

1:56
  • Создаем файл routes.ts и импортируем маршруты.
  • Создаем переменную routeconfig и присваиваем ей пустой массив.
  • Экспортируем конфигурацию маршрута по умолчанию.

Обновление приложения

2:52
  • Импортируем модуль маршрутизатора в компонент.
  • Добавляем директиву router-outlet в шаблон компонента.
  • Проверяем, что приложение отображает пустой экран.

Создание маршрута для домашней страницы

4:24
  • Добавляем маршрут для домашней страницы в файл routes.ts.
  • Устанавливаем путь и компонент для маршрута.
  • Обновляем приложение, чтобы использовать новые маршруты.

Создание компонента сведений

6:20
  • Создаем компонент details с помощью angular cli.
  • Добавляем маршрут для компонента сведений в файл routes.ts.
  • Обновляем компонент "Список объектов жилищного строительства" для ссылки на страницу сведений.

Настройка маршрутизации для компонента сведений

8:41
  • Используем директиву router link для ссылки на страницу сведений.
  • Обновляем шаблон компонента "Список объектов жилищного строительства".
  • Добавляем идентификатор в URL для отображения правильных данных.

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

11:49
  • Определяем маршрут для URL с параметром id.
  • Обновляем файл routes.ts для соответствия новым URL.
  • Проверяем, что ссылки на страницу сведений работают корректно.

Обновление кода для отображения информации о местоположении жилья

12:58
  • URL-адрес уникален для каждого местоположения жилья.
  • Обновление кода для доступа к параметру URL в компоненте.
  • Импорт inject и активированного маршрута из angular core и angular router.
  • Добавление свойства route типа activated route в компонент details.

Создание свойства и метода для работы с местоположением жилья

13:52
  • Создание свойства идентификатор местоположения жилья и установка его значения в ноль.
  • Создание метода constructor без параметров.
  • Назначение значения местоположения жилья и преобразование его в число.

Обновление шаблона и проверка в браузере

14:36
  • Обновление шаблона в метаданных декоратора компонентов.
  • Использование интерполяции для добавления идентификатора местоположения жилья.
  • Проверка работы в браузере и отображение идентификатора пользователя.

Заключение и анонс следующего раздела

15:09
  • Подведение итогов работы с angular router и директивой router link.
  • Передача информации в маршрут и извлечение информации из маршрута и компонента.
  • Анонс продолжения в следующем разделе.