Question

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

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”的模板编译期间发生错误装饰器不支持函数调用，但在“ slider”中调用了“ slideTo” “ slider”称为“ slideTo”。

Answer 1

问题是，当在Angular应用程序AOT中构建时，它会使用指定的组件元数据并预编译组件工厂。现在，角度编译器仅能理解javascript的子集。您必须考虑this来重写代码。

简而言之：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),
  ]);

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

2 个答案: