Angular Router Animations - 编译错误 - 装饰器不支持函数调用

Question

我有一个小项目，我想为路由实现角度动画，但编译时出现错误（ng build --prod）这里是我影响此的所有代码：-App组件

 import { Component } from '@angular/core'; import { FirestoreService } from './services/firestore.service'; import { RouterOutlet } from '@angular/router'; import { slider } from './route-animations'; @Component({ selector: 'app-root', animations: [ slider ], templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { constructor(public _af: FirestoreService) {} prepareRoute(outlet: RouterOutlet) { return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation']; } }

路线动画：

 import { trigger, transition, style, query, group, animateChild, animate, keyframes } from '@angular/animations'; // Basic export const fader = trigger('routeAnimations', [ transition('* <=> *', [ query( ':enter, :leave', [ style({ position: 'absolute', left: 0, width: '100%', opacity: 0, transform: 'scale(0) translateY(100%)' }) ], { optional: true } ), query(':enter', [ animate('600ms ease', style({ opacity: 1, transform: 'scale(1) translateY(0)' })) ], { optional: true }) ]) ]); // Positioned export const slider = trigger('routeAnimations', [ transition('* => isLeft', slideTo('left')), transition('* => isRight', slideTo('right')), transition('isRight => *', slideTo('left')), transition('isLeft => *', slideTo('right')) ]); export const transformer = trigger('routeAnimations', [ transition('* => isLeft', translateTo({ x: -100, y: -100, rotate: -720 })), transition('* => isRight', translateTo({ x: 100, y: -100, rotate: 90 })), transition('isRight => *', translateTo({ x: -100, y: -100, rotate: 360 })), transition('isLeft => *', translateTo({ x: 100, y: -100, rotate: -360 })) ]); function slideTo(direction) { const optional = { optional: true }; return [ query( ':enter, :leave', [ style({ position: 'absolute', top: 0, [direction]: 0, width: '100%' }) ], optional ), query(':enter', [ style({ [direction]: '-100%' }) ]), group([ query(':leave', [ animate('600ms ease', style({ [direction]: '100%' })) ], optional), query(':enter', [ animate('600ms ease', style({ [direction]: '0%' })) ]) ]) // Normalize the page style... Might not be necessary // Required only if you have child animations on the page // query(':leave', animateChild()), // query(':enter', animateChild()), ]; } export function translateTo({ x = 100, y = 0, rotate = 0 }) { const optional = { optional: true }; return [ query( ':enter, :leave', [ style({ position: 'absolute', top: 0, left: 0, width: '100%' }) ], optional ), query(':enter', [ style({ transform: `translate(${x}%, ${y}%) rotate(${rotate}deg)` }) ]), group([ query( ':leave', [ animate('600ms ease-out', style({ transform: `translate(${x}%, ${y}%) rotate(${rotate}deg)` })) ], optional ), query(':enter', [ animate('600ms ease-out', style({ transform: `translate(0, 0) rotate(0)` })) ]) ]) ]; } // Keyframes export const stepper = trigger('routeAnimations', [ transition('* <=> *', [ query(':enter, :leave', [ style({ position: 'absolute', left: 0, width: '100%' }) ]), group([ query(':enter', [ animate( '2000ms ease', keyframes([ style({ transform: 'scale(0) translateX(100%)', offset: 0 }), style({ transform: 'scale(0.5) translateX(25%)', offset: 0.3 }), style({ transform: 'scale(1) translateX(0%)', offset: 1 }) ]) ) ]), query(':leave', [ animate( '2000ms ease', keyframes([ style({ transform: 'scale(1)', offset: 0 }), style({ transform: 'scale(0.5) translateX(-25%) rotate(0)', offset: 0.35 }), style({ opacity: 0, transform: 'translateX(-50%) rotate(-180deg) scale(6)', offset: 1 }) ]) ) ]) ]) ]) ]);

错误是： src\\app\\app.component.ts(8,16) 中的错误：装饰器不支持“AppComponent”函数调用的模板编译期间出错，但在“滑块”“滑块”调用中调用了“slideTo” '滑到'。

Answer 1

问题是，在 Angular 应用 AOT 中构建时，它需要指定的组件元数据并预编译组件工厂。 现在 angular 编译器只能理解 javascript 的一个子集。 考虑到这一点，您将不得不重写您的代码。

简而言之： slideTo不能使用，因为它声明了const optional = { optional: true }; 在回来之前。 您应该在必要时内联optional对象。 我不确定其他功能。

Answer 2

创建三个变量：

optional
toTheLeft
toTheRight

分配这些变量而不是

slideTo('left')
slideTo('right') 

职能

完整代码：

 const optional = { optional: true }; let toTheRight = [ query(':enter, :leave', [ style({ position: 'absolute', top: '0', right: 0, width: '100%', }) ], optional), query(':enter', [ style({ right: '-100%', }) ]), group([ query(':leave', [ animate('300ms ease', style({ right: '100%', })) ], optional), query(':enter', [ animate('300ms ease', style({ right: '0%'})) ]) ]), ]; let toTheLeft = [ query(':enter, :leave', [ style({ position: 'absolute', top: '0', left: 0, width: '100%', }) ], optional), query(':enter', [ style({ right: '-100%', }) ]), group([ query(':leave', [ animate('300ms ease', style({ left: '100%', })) ], optional), query(':enter', [ animate('300ms ease', style({ left: '0%'})) ]) ]), ] export const slider = trigger('routeAnimations', [ transition('* => isLeft', toTheLeft), transition('* => isRight', toTheRight), transition('isRight => *', toTheLeft), transition('isLeft => *', toTheRight), ]);