时间戳

首页 > 解决方案 > Angular Router Animations - 编译错误 - 装饰器不支持函数调用

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

问题描述

我有一个小项目，我想为路由实现角度动画，但编译时出错（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' 模板编译期间出错 装饰器不支持函数调用，但在 'slider' 'slider' 调用中调用了 'slideTo' '幻灯片'。

标签： javascriptangulartypescriptanimation

解决方案

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

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

推荐阅读