Angular анимация роутера на том же компоненте - PullRequest
Новая
       14

Angular анимация роутера на том же компоненте

0 голосов
/ 21 апреля 2020

Я пытаюсь создать анимацию маршрутизатора при навигации между маршрутами с использованием одного и того же компонента

Мой app-routing.module.ts выглядит так: 

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    data: { animation: '1' }
  },
  {
    path: 'turistguide/:url',
    component: PropertyComponent,
    data: { animation: '3' }
  },
  {
    path: 'turistguide',
    component: LandingPageComponent,
    data: { animation: '2' }
  },
  {
    path: 'companyguide',
    component: LandingPageComponent,
    data: { animation: '2' }
  }
];

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes, {
      onSameUrlNavigation: 'reload',
      scrollPositionRestoration: 'enabled',
    }),
  ],
  providers: [{
    provide: RouteReuseStrategy,
    useClass: CustomReuseStrategy
  }],
  exports: [RouterModule],
})

Как вы можете SE Я просто использую 3 компонента в своем проекте (просто потому, что он проще) для моей цели

Моя анимация выглядит следующим образом: 

function slideTo(direction) {
    console.log('direction :', direction);
    const optional = { optional: true };
    return [
        query(':enter, :leave', [
            style({
                position: 'absolute',
                top: 0,
                [direction]: 0,
                width: '100%',
                opacity: 1
            })
        ], optional),
        query(':enter', [
            style({ [direction]: '-100%', 'opacity': '0' })
        ]),
        group([
            query(':leave', [
                animate('800ms ease', style({ [direction]: '100%', 'opacity': '0' }))
            ], optional),
            query(':enter', [
                animate('800ms ease', style({ [direction]: '0%', 'opacity': '1' }))
            ])
        ]),
    ];
}

У меня 2 проблемы:

  1. Анимация не запускается при навигации между туристическим гидом и гидом компании (используется один и тот же компонент)
  2. Я хотел бы иметь возможность искать "data: {animation: '2'}" и использовать значение в моей навигации, чтобы мне не приходилось жестко кодировать каждый возможный сценарий. Идеально было бы сказать, что если текущее значение меньше, чем новое значение, direction = left, если нет, direction = right

Я исправил так, что компонент ngOninit запускается при навигации между turistguide и companyguide, но анимация не запускается

...