Question

我下面有一个Animation类：

import { trigger, state, style, transition, animate } from '@angular/animations';
export class Animations {
constructor() {}
animate = animate('.5s cubic-bezier(0.68, -0.55, 0.265, 1.55)');
side() {
 return trigger(`visibilityAnimation`, [
    state('false', style({
       transform: '{{ side }}',
       display: 'none'
    }), { params: { side: 'translateX(100%)' } }),
    state('true', style({
       transform: 'translateX(0)',
       display: 'block'
    })),
    transition('false <=> true', this.animate),
  ]);
}

top() {.....}

chooseAnimation() {....}

background() {....}
}

我正在使用的组件之一如下：

import { Animations } from './animations';

const animations = new Animations();

@Component({
 selector: 'app-nav-user',
 templateUrl: './nav-user.component.html',
 styleUrls: ['./nav-user.component.scss'],
 animations: [
    animations.chooseAnimation(),
    animations.background()
  ]
})

当我使用 ng build --prod --aot --output-hashing = all 时，出现上述错误。

注意：我使用的是cli cli v7。

Answer 1

在尝试编写参数化动画的代码时，我遇到了类似的情况。编写返回动画对象的函数是很直观的事情，并且在发生错误之后，您会认为将返回值存储在常量中并将其传递给装饰器是可行的，但AOT则不行。可以说，原因与编译的顺序有关。 AOT编译器将首先解析元数据，并且根本不会处理函数调用，因此，即使您尝试在装饰器之外解析元数据，也是如此。

因此，您应该做的是将trigger(...)对象导出为常量，然后使用动画选项params进行所有必要的配置，就像在示例中对side参数所做的一样

我不能为您提供更多帮助，因为您没有共享实际触发错误的代码部分chooseAnimation，但是您应该能够从中得到启发，您已经知道如何使用这些选项。

Answer 2

我遇到了同样的问题，所以我只是在扩展@Henrique Erzinger的答案，这可以帮助我解决问题。

您需要做的就是确保动画功能中没有用户定义的参数-换句话说，所有参数（可以说）都是硬编码的。

例如，可以通过在装饰器中使用fadeIn从装饰器调用函数animations: [fadeIn()]，但是函数定义本身不能接受任何参数。

// this WILL work
export function fadeIn(): AnimationTriggerMetadata {
  return trigger('fadeIn', [
    transition(':enter', [
      // only static code, no variables allowed ...
    ])
  ]);
}

// this will NOT work
export function fadeIn(time = 300): AnimationTriggerMetadata {
  return trigger('fadeIn', [
    transition(':enter', [
      group([
        animate(time + 'ms' .... // NOT allowed
    ])
  ]);
}

装饰器不支持函数调用，但称为“动画”

2 个答案: