如何让 Angular 路由器动画与 'ng build --prod' 一起工作？

Question

当我想使用 'ng build --prod' 构建我的 angular 应用程序时出现错误：

ERROR in src/app/route-animations.ts(15,9): Error during template compile of 'slideTo' Expression form not supported. src/app/route-animations.ts(20,15): Error during template compile of 'slideTo' Expression form not supported. src/app/route-animations.ts(24,39): Error during template compile of 'slideTo' Expression form not supported. src/app/route-animations.ts(27,39): Error during template compile of 'slideTo' Expression form not supported. src/app/route-animations.ts(15,9): Error during template compile of 'slideTo' Expression form not supported. src/app/route-animations.ts(20,15): Error during template compile of 'slideTo' Expression form not supported. src/app/route-animations.ts(24,39): Error during template compile of 'slideTo' Expression form not supported. src/app/route-animations.ts(27,39): Error during template compile of 'slideTo' Expression form not supported.

我真的不知道如何解决这个问题。

我已将路由器动画添加到我的应用程序中，如下所示：

<div [@routeAnimations]="prepareRoute(outlet)" style="height: 100%">
  <router-outlet #outlet="outlet"></router-outlet>
</div>

import { slider } from './route-animations';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  animations: [ 
    slider
  ]
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    ...
  }

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

import { trigger, transition, query, style, animate, group } from '@angular/animations';

export const slider =
  trigger('routeAnimations', [
    transition('isRight => isLeft', slideTo('left') ),
    transition('isLeft => isRight', slideTo('right') )
  ]);

export function slideTo(direction: string) {
  return [
    query(':enter, :leave', [
      style({
        position: 'absolute',
        top: 0,
        [direction]: 0,
        width: '100%'
      })
    ], { optional: true }),
    query(':enter', [
      style({ [direction]: '-100%'})
    ]),
    group([
      query(':leave', [
        animate('600ms ease', style({ [direction]: '100%'}))
      ], { optional: true }),
      query(':enter', [
        animate('600ms ease', style({ [direction]: '0%'}))
      ])
    ]),
  ];
}

Answer 1

你想要的并不完全可能，因为动画不是装饰器模式语法的功能，但可能有一种方法可以重用某些动画，但关于这方面的文章非常有限。

使用可从每个过渡选项传递的插值变量创建可重复使用的动画

import { trigger, transition, query, style, animate, group, animation, useAnimation } from '@angular/animations';

// Reusable animation
export const slideAnimation = animation([
  query(':enter, :leave', [
    style({
      position: 'absolute',
      top: 0,
      left: '{{left}}',
      width: '100%'
    })
  ], { optional: true }),
  query(':enter', [
    style({ left: '-{{left}}' })
  ]),
  group([
    query(':leave', [
      animate('600ms ease', style({ left: '{{left}}' }))
    ], { optional: true }),
    query(':enter', [
      animate('600ms ease', style({ left: '{{left}}' }))
    ])
  ]),
]);


export const slider = trigger('routeAnimations', [
  transition('isRight => isLeft', [useAnimation(slideAnimation, { params: { left: '0%', time: '2s' } })]),
  transition('isLeft => isRight', [useAnimation(slideAnimation, { params: { direction: '100%', time: '2s' } })])
]);

发布的解决方案与您目前的解决方案不完全相同，这指向了正确的方向，希望您能实现它

参考：https://angular.io/guide/reusable-animations

如何让 Angular 路由器动画与 'ng build --prod' 一起工作？

How to get Angular Router Animations working with 'ng build --prod'?

angular

angular-router

angular-animations

angular-transitions