Параллельная (асинхронная неблокирующая) маршрутизация в угловом режиме 2/4
В приложении есть страница с 2–3 кнопками категорий. По сути, нажатие кнопки вызывает список элементов в каждой категории, страница должна отображаться после того, как данные API будут доступны.
Я разработал угловые 2 приложения-маршрута с вызовами API разрешения и не должен блокировать всю страницу с помощью счетчика, когда страница загружается, поскольку мы переносим функциональность приложения в угловой 4.
Когда пользователь нажимает на одну категорию, если ответ задерживается, он может щелкнуть другую категорию. Когда он вернется назад, он будет ожидать загрузки данных в ранее нажатой категории, но Angular 2/4 отменяет маршрут из-за Navigation ID does not match with the current route
Для лучшего понимания, пожалуйста, смотрите ссылку plnkr ниже. http://embed.plnkr.co/UiyhZWCl63Tfq41WY48q/
Нажмите на планету и людей одновременно, обратите внимание, что только один раздел загружает, а другой раздел не загружает данные. Если вы проверите, то увидите, что событие NavigationCancel выброшено.
1 ответ
Не уверен, что квалифицирован, чтобы объяснить, как распознаватель работает для маршрутизатора на Angular 2, но просто снова просмотрел их документ.
Таким образом, вы хотите отложить рендеринг компонента до тех пор, пока не будут получены все необходимые данные.
Вам нужен решатель.
Насколько я понимаю, распознаватель поможет в случае, если вы хотите полностью переключить представление и извлечь данные перед переключением. Таким образом, данные готовы в момент активации маршрута. Это также позволяет обрабатывать ошибки перед маршрутизацией к компоненту. Подумайте о компоновке основных деталей, при которой вы щелкаете мышью по элементу, он перемещается к подробному виду. Нет смысла переходить к деталям для идентификатора, у которого нет записи, и лучше отправить пользователя обратно в список.
Ваш случай не является распространенным случаем, когда вы хотите отобразить другую точку на маршруте. И вы хотите, чтобы в тот момент, когда вы нажимаете на людей / планету, он будет визуализировать компонент напрямую и начнет получать данные. Возможно, вы захотите показать заполнитель "Загрузка...". Поэтому я предложил использовать хук ngOnInit для этой цели.
Рабочий плункер: https://embed.plnkr.co/rSEjb46WI09PsOtClJn5/