AngularInDepth уходит от Medium. Эта статья, ее обновления и более свежие статьи размещены на новой платформе inDepth.dev

С PR # 25740 все операции, выполняемые маршрутизатором Angular, объединяются в единый наблюдаемый поток. Также одновременно может быть только одна активная навигация. Это дает преимущества, заключающиеся в том, что навигация становится более быстрой и предсказуемой. Хотя эти изменения в основном внутренние, они действительно влияют на то, как мы должны думать о навигации и маршрутизации в наших приложениях.

Это основной рефакторинг того, как раньше работал маршрутизатор. У этого рефакторинга есть несколько основных преимуществ, и будущая работа будет строиться на нем.

Эти изменения были выпущены как часть Angular 7.0. В этой статье мы рассмотрим эти изменения и посмотрим, как их можно использовать. Мы также увидим, как switchMap обеспечивает одновременное существование только одной навигации.

Понимание навигации

Навигация происходит всякий раз, когда изменяется URL-адрес. Это может быть результатом какого-либо императивного действия (служба, вызывающая navigate, или охрана, возвращающая UrlTree) или какого-либо другого действия, например, когда пользователь щелкает директиву [routerLink].

После запуска навигация проходит через следующие этапы:

  1. Перенаправления процессов
  2. URL для сопоставления пути
  3. Запускайте охранников и решателей
  4. Рендеринг компонентов и обновление местоположения браузера

Если вы хотите узнать больше, я написал статью, объясняющую каждый этап.

Эта проблема

До # 25740 можно было запускать несколько навигаций одновременно. Как вы понимаете, это может вызвать проблемы.

Рассмотрим следующий сценарий:

  • Пользователь нажимает ссылку X. Начинается новая навигация с id из 1.
  • Во время перехода к X охранники и распознаватели работают асинхронно, и их выполнение занимает 10 секунд.
  • В течение этих 10 секунд пользователю надоедает, и он щелкает ссылку Y, которая запускает новую навигацию к Y с id из 2.
  • Навигация 2 должна дождаться завершения работы охранников и распознавателей навигации 1 (результаты которых будут проигнорированы).
  • Возможно, один из охранников в навигации 1 выходит из строя и инициирует перенаправление, пока навигация 2 ждет. Сейчас сложно сказать, куда попадет пользователь.

Джейсон Аден обсуждал именно эту проблему в своем выступлении на AngularConnect 2018, с которым я рекомендую ознакомиться.

Короче говоря, управление одновременной навигацией было беспорядочным как внутри, так и за пределами фреймворка. С изменениями, внесенными в 25740, одновременно может быть только одна активная навигация.

Как мы увидим, это упрощает работу и упрощает навигацию.

Перемены

Самые большие внутренние изменения в 25740 заключаются в следующем:

  • Каждый этап навигационного цикла теперь представлен собственным оператором (перенаправления, распознавание маршрута и т. Д.)
  • Эти операторы запускаются через switchMap, который гарантирует, что учитывается только самая последняя навигация. И он отменит и очистит все незавершенные переходы.

Детали

Одна карта может иметь решающее значение

Как упоминалось ранее, новое правило «одна навигация за раз» обеспечивается могущественным оператором switchMap. Путем создания единого наблюдаемого потока и конвейерной передачи всех переходов в маршрутизаторе через switchMap вместо mergeMap любая новая навигация приведет к отмене предыдущей навигации и очистке на switchMap.

* Рефакторинг `switchMap` вместо предыдущего` mergeMap`, чтобы гарантировать, что новые переходы вызывают отмену и очистку уже запущенных переходов
- выдержка из PR 25740

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

Пользовательские операторы

Начиная с версии 25740, различные части процесса навигации были преобразованы в пользовательские операторы, которые находятся под /packages/router/src/operators. Вы можете видеть, что каждый из этапов навигации, упомянутых ранее, теперь представлен операторами:

  • apply_redirects.ts
  • признать.ц
  • check_guards.ts и resolve_data.ts
  • activate_routes.ts

Внутри переходы между навигациями представлены типом NavigationTransition. Наблюдаемый NavigationTransition, называемый router.transitions, используется с основным router.navigations наблюдаемым для обработки новой навигации. Здесь switchMap используется для отмены любых текущих переходов при каждом новом переходе.

Вы можете увидеть весь конвейер, если проверите setupNavigations в router.ts.

Преимущества

С этими новыми изменениями любая новая навигация автоматически отменяет и очищает все ожидающие навигации. Это означает меньше утечек памяти и меньше времени, затрачиваемого на ожидание завершения работы охранников и распознавателей для устаревшей навигации. В более крупных приложениях эти преимущества действительно могут иметь значение.

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

Резюме

С изменениями в 25740:

  • В любой момент времени может быть только одна активная навигация.
  • Когда запускается новая навигация, любая ожидающая навигация отменяется и очищается.
  • Внутри каждый этап навигационного цикла разбит на отдельные операторы.
  • Эти изменения должны обеспечить более быструю и надежную навигацию.

Удачной навигации!