Большинство статей и руководств по этой теме охватывают один и тот же простой сценарий. Этот другой.

Какой пример я имею в виду? Тот, в котором приложение:

  • маршруты между разными компонентами
    (например, с HomeComponent на ContactComponent до SettingsComponent)
  • и анимируется только в одном направлении, например:

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

Я разместил готовый код на Github, а вы можете увидеть рабочую демонстрацию на StackBlitz.

Проблема 1: определение маршрута

"Ооо, это тот же компонент!"

Нет ничего необычного в том, чтобы иметь вложенные маршруты с параметрами, верно?

Например. у вас есть список элементов, выберите элемент и перейдите на страницу с подробными сведениями о нем. С этой страницы вы можете перейти непосредственно к следующей или предыдущей странице элемента.

Определение маршрутизации может выглядеть так:

Затем мы добавим определение анимации в декоратор ItemsComponent и метод getState, который мы будем использовать для получения различных значений для триггера анимации:

С шаблоном, который выглядит так:

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

В чем проблема? Переход определен для запросов :enter и :leave, что означает, что он будет выполняться всякий раз, когда компонент в запросе будет создан или уничтожен.

Но когда изменение пути происходит внутри той же записи маршрута, например мы перемещаемся напрямую с domain.com/items/4 на domain.com/items/5 Angular не создает новый компонент, а вместо этого повторно использует существующий. Убедитесь в этом сами и введите console.log в constructor - если изменится только параметр маршрута, компонент больше не будет построен.

Эта функция называется RouteReuseStrategy, и, как вы уже догадались, мы можем ее настроить.

Конфигурация RouteReuseStrategy

Чтобы изменить поведение по умолчанию, нам нужно создать специальный класс, который должен реализовывать интерфейс RouteReuseStrategy Angular, а затем предоставить его нашему приложению:

Вот и все - первая проблема решена 😎 (и я не скажу, сколько времени у меня ушло на то, чтобы придумать это решение)

Проблема 2: направление анимации

«Значит, я могу изменить параметры перехода после того, как определил его ?!»

Давайте создадим сервис, который будет отслеживать изменения ItemComponent маршрута:

Теперь в нашем ItemComponent мы будем генерировать индекс элемента в списке элементов каждый раз, когда компонент загружается (т.е. мы меняем маршрут).

И, наконец, мы будем использовать эту наблюдаемую в родительском ItemsComponent, чтобы вычислить все данные, которые нам нужны для нашего перехода.
Для этого я добавил номера строк, чтобы мы могли рассмотреть его более подробно:

Оператор line #4: pairwise (из rxjs/operators) изменяет результирующий поток так, что вместо того, чтобы испускать только новое значение, он теперь выдает 2 последних значения.
line #3: На самом деле мы не можем дождаться 2 значений, нам уже понадобится пара, испущенная на первом itemChange, поэтому оператор startWith(0) дает нам что-то (значение 0) для сопряжения с нашим первым значением.
line #5: Пара создается как массив, поэтому мы деструктурируем его до описательных имен переменных.
lines #6-10: Мы передадим весь этот объект как значение триггера Angular в шаблоне.
lines #7-10: Свойство params определяет Ну, параметры, которые мы можем использовать в нашем определении анимации. Мы можем называть их как угодно. Надеюсь, вы уже видите здесь логику:

Зная, что 0 - это смещение страницы, которая видна на экране, если мы перейдем от большего индекса к меньшему (prev > curr), мы хотим, чтобы наша страница входила на экран справа налево (+100 -> 0) и оставляла его. также влево (0 -> -100).
В противном случае мы движемся в обратном направлении.

В нашем обновленном шаблоне теперь используется наблюдаемое routeTrigger$ следующим образом:

А что касается анимации, нам нужно только обновить translateX, чтобы они использовали наш определенный params:

Со всеми нашими изменениями теперь мы можем наслаждаться более приятным и немного более интуитивным интерфейсом при использовании нашего приложения:

Вы узнали что-то новое? В таком случае вы можете:

→ похлопайте кнопку 👏 внизу️, чтобы это увидело больше людей
→ подписывайтесь на меня в Твиттере (@sulco), чтобы вы не пропустили следующие публикации!