Question

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

TJSONIterator

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

这是我的动画：

Type = Main
Version = 1.1
BlackListInfo = X45
Speed = 1,5
Serial = 99190
Location = TX
CRC = ok
ReportID = 69

这是路由器出口的主要组成部分：

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

此处是ts函数：

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

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

Answer 1

我遇到了同样的问题，结果是，如果您在其中一个组件中有错误，动画将被中断，我会修复我的错误消息，并且可以正常工作

（角度6）路线转换动画不适用于子路线

1 个答案: