Question

当我想使用“ ng build --prod”构建我的角度应用程序时出现错误：

src / app / route-animations.ts（15,9）中的
ERROR：模板编译'slideTo'时出错不支持表达形式。 src / app / route-animations.ts（20,15）：“ slideTo”模板编译期间出错不支持表达形式。 src / app / route-animations.ts（24,39）：模板编译“ slideTo”时出错不支持表达形式。 src / app / route-animations.ts（27,39）：“ slideTo”模板编译期间出错不支持表达形式。 src / app / route-animations.ts（15,9）：“ slideTo”模板编译期间出错不支持表达形式。 src / app / route-animations.ts（20,15）：“ slideTo”模板编译期间出错不支持表达形式。 src / app / route-animations.ts（24,39）：模板编译“ slideTo”时出错不支持表达形式。 src / app / route-animations.ts（27,39）：“ slideTo”模板编译期间出错不支持表达形式。</ p>

我真的不知道该如何解决。

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

<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 Router Animations与'ng build --prod'一起使用？

1 个答案: