Angular пользовательских сложных переходов маршрутизатора - PullRequest
Новая
       4

Angular пользовательских сложных переходов маршрутизатора

0 голосов
/ 08 марта 2020

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

routeTransition(destination) {
  if (this.router.url !== destination) {
    this.ls.startLoading(destination)
  }
}

startLoading(destination) {
  if (this.loading.getValue() === 0) {
    this.loading.next(1);
    setTimeout(() => {
      this.router.navigate([destination]);
    }, 750)
  }
}

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

Это переход, о котором я говорю: enter image description here

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

1 Ответ

0 голосов
/ 08 марта 2020

Использование setTimeout действительно плохо, потому что это приблизительно.
Angular может обеспечить анимацию, особенно для переходов маршрутизатора.

Вы можете добавить директиву к своему выходу маршрутизатора для запуска анимации Angular при изменении страницы.

Например, на вашем app.component. html: 

<div [@routeAnimations]="prepareRoute(outlet)">
   <router-outlet #outlet="outlet"></router-outlet>
</div>

app.component.ts 

public prepareRoute(routerOutlet: RouterOutlet): string {
    return routerOutlet && routerOutlet.activatedRouteData && routerOutlet.activatedRouteData[ 'animation' ];
  }

В этом примере prepareRoute будет использовать имя анимации непосредственно из пользовательских данных вашего маршрута, используя свойство animation.
Таким образом, он позволяет использовать анимацию только на указанных c страницах.

Также необходимо зарегистрировать внутри компонента анимации. 

@Component({
   animations: [
      PAGES_ANIMATION
   ],

Затем определите тип анимации между вашими маршрутами. 

export const PAGES_ANIMATION = trigger('routeAnimations', [
  transition(`home => register`, SLIDE_RIGHT_ANIMATION),
  transition(`register => home`, SLIDE_LEFT_ANIMATION),

И, наконец, создайте Angular анимацию. 

export const SLIDE_RIGHT_ANIMATION = [
  style({
    position: 'relative'
  }),
  query(':enter, :leave', [
    style({
      height: '100vh',
      left: 0,
      overflowY: 'hidden',
      position: 'absolute',
      top: 0,
      width: '100%'
    })
  ]),
  query(':enter', [
    style({
      transform: 'translateX(100%)'
    })
  ]),
  query(':leave', animateChild()),
  group([
    query(':leave', [
      animate('400ms ease-out', style({
        transform: 'translateX(-100%)'
      }))
    ]),
    query(':enter', [
      animate('400ms ease-out', style({
        transform: 'translateX(0%)'
      }))
    ])
  ]),
  query(':enter', animateChild())
];

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

...