Resolvers: доставка данных в Angular в один клик
Я однажды где-то читал, что вы всегда должны делать свои компоненты как можно меньше. Это упрощает понимание и заставляет вас использовать повторно используемую логику в Сервисах. Но когда вам нужно получить данные из API, вам может потребоваться сопоставить данные, чтобы они соответствовали желаемому формату. Вам нужно будет позаботиться обо всем этом в своем компоненте, как только он будет запущен… верно?
Неправильный.
Есть способ получить все, что вам нужно, до фактического изменения маршрута для инициализации вашего Компонента. Для этого вам понадобится Резольвер.
Коротко о резольверах
Маршрутизатор Angular использует Guard, чтобы вы могли управлять изменением маршрута. Например, вы можете запретить навигацию по маршруту (или от него). Для этого вы добавите Стражу на этот маршрут.
Резольверы - это разновидность защиты. Он возвращает Observable или Promise и позволяет продолжить изменение маршрута только после завершения этого Observable (или Promise).
Чтобы связать преобразователь с маршрутом, вам необходимо указать ключ разрешения в соответствующем маршруте.
А для доступа к данным ваш компонент может получить их из моментального снимка ActivatedRoute. Вы взялись за дело!
Это так просто!
Отзыв о нажатии на ссылку
У использования резолверов есть обратная сторона, которую вы захотите устранить. При переходе к маршруту, использующему Резольвер, вы заметите задержку между моментом нажатия и моментом фактического изменения маршрута. Пользователи, просматривающие ваше приложение Angular, могут не понимать, что происходит, и думать, что ваше приложение либо не отвечает, либо просто работает медленно.
Поскольку ваш маршрутизатор ожидает завершения резолвера, может пройти от миллисекунд до пары секунд, прежде чем маршрут фактически изменится (в зависимости от времени, которое требуется API для отправки ответа). Но не волнуйтесь, выход есть.
В корневом компоненте вы можете подписаться на события маршрутизатора. Существует много событий Router, но мы хотим прослушать NavigationStart и NavigationEnd. Они сообщают нам, когда пользователь щелкнул ссылку и когда распознаватель наконец завершил работу со своим Observable.
В приведенном выше примере наш AppComponent имеет логическое свойство с именем isLoadingRoute, которое устанавливается в true, когда пользователь щелкает ссылку, и возвращается к false после завершения навигации. Затем вы можете легко использовать это свойство, чтобы показать какое-то состояние загрузки в вашем приложении. Таким образом, ваш пользователь будет получать немедленную обратную связь при навигации по вашим маршрутам, оборудованным Resolver!
Поделитесь своим использованием резольверов!
Использовали ли вы резольверы в своих проектах с пользой? Помогите своим коллегам-разработчикам, поделившись их фрагментами в комментариях ниже!
Продолжайте кодировать!
