Введение в маршрутизацию 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. Передача информации в маршрут и извлечение информации из маршрута и компонента. Анонс продолжения в следующем разделе.