Параллельная (асинхронная неблокирующая) маршрутизация в Angular 2/4

В приложении есть страница с кнопками от 2 до 3 категорий. По сути, нажатие кнопки выводит список элементов в каждой категории, страница должна отображаться после того, как будут доступны данные, полученные API.

Я разработал маршруты приложений angular 2 с вызовами API разрешения, и я не должен блокировать всю страницу с помощью счетчика при загрузке страницы, поскольку мы переносим функциональность приложения на angular 4.

Когда пользователь нажимает на одну категорию, если ответ задерживается, он может нажать на другую категорию. Когда он возвращается назад, он ожидает, что данные будут загружены в ранее выбранную категорию, но Angular 2/4 отменяет маршрут из-за Navigation ID does not match with the current route

Чтобы лучше понять, пожалуйста, посмотрите ссылку plnkr ниже. http://embed.plnkr.co/UiyhZWCl63Tfq41WY48q/

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


angular angular2-routing angular2-router3 angular2-router
person newstackoverflowuser5555    schedule 27.06.2017    source источник
comment
Плункер не работает, не могли бы вы проверить?   -  person trungk18    schedule 03.07.2017
comment
@Hurix plnkr выдает ошибку «нет провайдера для ApplicationRef»   -  person Dhyey    schedule 03.07.2017
comment
@trungk18 trungk18 исправил plnkr сейчас   -  person newstackoverflowuser5555    schedule 03.07.2017
comment
@Dhyey Исправил ссылку plnkr. Пожалуйста, проверьте сейчас   -  person newstackoverflowuser5555    schedule 03.07.2017
comment
Я думаю, потому что при использовании разрешения это означает, что нам нужно что-то получить перед навигацией. Поэтому, если вы перейдете на другой маршрут до того, как текущий маршрут будет разрешен, он будет отменен. Я также предлагаю ответ от @trungk18   -  person Sasuke91    schedule 05.07.2017
comment
@ Sasuke91 Я согласен с тобой. К сожалению, мое приложение многостраничное. Поскольку Angular предоставляет именованный выход, следовательно, маршрут должен быть разрешен асинхронно, это из другого выхода.   -  person newstackoverflowuser5555    schedule 07.07.2017
comment
Согласитесь, так что нам понадобится другое решение, чтобы увидеть, поддерживает ли Angular или нет. Меня тоже интересует эта функция.   -  person Sasuke91    schedule 07.07.2017

Ответы (1)


arrow_upward
4
arrow_downward

Не уверен, что могу объяснить, как работает резолвер для маршрутизатора на Angular 2, но только что снова просмотрел их документ.

Таким образом, вы хотите отложить рендеринг маршрутизируемого компонента до тех пор, пока не будут получены все необходимые данные.

Вам нужен резолвер.

Насколько я понимаю, преобразователь поможет, если вы хотите полностью переключить представление и получить данные перед переключением. Таким образом, данные готовы в момент активации маршрута. Это также позволяет обрабатывать ошибки перед маршрутизацией к компоненту. Подумайте о макете master-detail, когда вы щелкаете элемент, и он переходит к подробному представлению. Нет смысла переходить к детали для идентификатора, у которого нет записи, и лучше отправить пользователя обратно в список.

Ваш случай не является обычным случаем, когда вы хотите отображать разные базы точек на маршруте. И вы хотите, чтобы в тот момент, когда вы нажмете на людей/планету, он отобразил компонент напрямую и начал извлекать данные. Возможно, вы также захотите показать заполнитель «Загрузка...». Поэтому я предложил использовать хук ngOnInit для этой цели.

Рабочий плункер: https://embed.plnkr.co/rSEjb46WI09PsOtClJn5/

person trungk18    schedule 03.07.2017
comment
@ trunkgk18 Как я уже сказал, дизайн приложения не может быть изменен, так как это существующее приложение, которое скоро будет выпущено. Наше приложение представляет собой приложение с несколькими вкладками/страницами, в котором пользователь будет нажимать несколько ссылок и ожидать загрузки в фоновом режиме. Angular мог бы поддерживать асинхронные маршруты, по крайней мере, для именованных выходов. - person newstackoverflowuser5555; 07.07.2017
comment
Да, я понимаю. Если это так, я также жду ответа от ребят здесь. - person trungk18; 07.07.2017