AngularInDepth уходит от Medium. Эта статья, ее обновления и более свежие статьи размещены на новой платформе inDepth.dev
С PR # 25740 все операции, выполняемые маршрутизатором Angular, объединяются в единый наблюдаемый поток. Также одновременно может быть только одна активная навигация. Это дает преимущества, заключающиеся в том, что навигация становится более быстрой и предсказуемой. Хотя эти изменения в основном внутренние, они действительно влияют на то, как мы должны думать о навигации и маршрутизации в наших приложениях.
Это основной рефакторинг того, как раньше работал маршрутизатор. У этого рефакторинга есть несколько основных преимуществ, и будущая работа будет строиться на нем.
Эти изменения были выпущены как часть Angular 7.0. В этой статье мы рассмотрим эти изменения и посмотрим, как их можно использовать. Мы также увидим, как switchMap
обеспечивает одновременное существование только одной навигации.
Понимание навигации
Навигация происходит всякий раз, когда изменяется URL-адрес. Это может быть результатом какого-либо императивного действия (служба, вызывающая navigate
, или охрана, возвращающая UrlTree) или какого-либо другого действия, например, когда пользователь щелкает директиву [routerLink]
.
После запуска навигация проходит через следующие этапы:
- Перенаправления процессов
- URL для сопоставления пути
- Запускайте охранников и решателей
- Рендеринг компонентов и обновление местоположения браузера
Если вы хотите узнать больше, я написал статью, объясняющую каждый этап.
Эта проблема
До # 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:
- В любой момент времени может быть только одна активная навигация.
- Когда запускается новая навигация, любая ожидающая навигация отменяется и очищается.
- Внутри каждый этап навигационного цикла разбит на отдельные операторы.
- Эти изменения должны обеспечить более быструю и надежную навигацию.
Удачной навигации!