angular6 - (角度6)路线转换动画不适用于子路线

Question

我必须在路由器插座上设置路由器动画。实际上，我想要动画的只是一个路由。这是我的路由模块：

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 }]
})

在状态=“ details”的路径之间路由时，需要动画。
我还实现了自定义重用策略，以便在动画触发时重新初始化组件。

这是我的动画：

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;
  }

好吧，发生的事情是该动画跳过了现有组件上动画的“：leave”部分，它消失了一会儿空白页，然后出现了新组件的“：enter”动画。

Answer 1

我遇到了同样的问题，如果您在组件之一中出现错误，动画将被中断，我将修复我的错误消息，并且它可以正常工作