(Angular 6) Анимация перехода маршрута не работает на дочернем маршруте - PullRequest
Новая
       12

(Angular 6) Анимация перехода маршрута не работает на дочернем маршруте

0 голосов
/ 09 апреля 2019

Я должен установить анимацию маршрутизатора для моей розетки маршрутизатора. На самом деле то, что я хочу оживить, это всего лишь один маршрут. Это мои модули маршрутизации: 

export class CustomReuseStrategy extends RouteReuseStrategy {
...
...
  public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
    return  curr.component ? (<any>curr.component).name !== 'CardDetailComponent' : true;
  }
}

const wallRoutes: Routes = [
  {
    path: 'wall',
    component: WrapperComponent,
    children: [
      { path: '', component: CardListComponent },
      {
        path: 'placeslist/:idPlacesList/details/:id',
        component: CardDetailComponent,
        canActivate: [CardDetailsGuard],
        data: {
          state: 'details',
          reuse: false
        }
      },
      {
        path: 'placeslist/:id',
        component: PlaceslistDetailComponent,
        canActivate: [PlacesListDetailsGuard],
        data: {
          reuse: true
        }
      },
      {
        path: 'details/:id',
        component: CardDetailComponent,
        canActivate: [CardDetailsGuard],
        data: {
          state: 'details',
          reuse: false
        }
      },
      {
        path: 'add/:title/:father',
        component: EntityAddComponent,
        canActivate: [EntityAddGuard],
        data: {
          reuse: true
        }
      }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(wallRoutes)],
  exports: [RouterModule],
  providers: [CardDetailsGuard, EntityAddGuard, PlacesListDetailsGuard, { provide: RouteReuseStrategy, useClass: CustomReuseStrategy }]
})

Анимация необходима при маршрутизации между путями с состоянием = "детали". Я также реализовал собственную стратегию повторного использования для повторного запуска компонента, когда анимация должна срабатывать.

Вот мой аниматон: 

export const routeAnimations =
  trigger('routeAnimations', [
    transition('* <=> details', showDetailChildren('100%', '-100%') ),
  ]);


  function showDetailChildren(slideFrom: string, slideTo: string)
  {
    return[
        query(':enter, :leave', style({ position: 'fixed', width:'60%' }), { optional: true }), 
        group([  
          query(':enter', [
            style({ transform: 'translateY('+slideTo+')' }),
            animate('0.5s ease-in-out', style({ transform: 'translateY(0%)' }))
          ], { optional: true }),
          query(':leave', [
            style({ transform: 'translateY(0%)' }),
            animate('0.5s ease-in-out', style({ transform: 'translateY('+slideFrom+')' }))
          ],{ optional: true }),
        ]),
  ]  
}

А вот и мой основной компонент с выходом роутера: 

<main [@routeAnimations]="getState(o)">
<router-outlet #o="outlet"></router-outlet>
</main>

здесь функция ts: 

  getState(outlet) {
    return outlet.activatedRouteData.state;
  }

Что же происходит, так это то, что анимация пропускает часть анимации ": уйти" на выходящем компоненте, и она просто исчезает с несколькими моментами пустой страницы, а затем появляется анимация ": ввод" нового компонента .

...