0

我有一个动画类如下：

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时，出现上述错误。

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

4

2 回答 2

0

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

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

fadeIn例如，您的 function可以通过在装饰器中使用从装饰器调用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
    ])
  ]);
}
于 2020-01-29T11:07:20.037 回答
0

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

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

我真的不能帮助你更多，因为你没有分享实际触发错误的代码部分，chooseAnimation方法，但你应该能够理解它背后的想法，因为你已经知道如何使用选项。

于 2019-09-13T17:11:41.557 回答