Question

我正在尝试创建可重复使用的动画，但在使用angular-cli编译我的应用时出现以下错误：

Error encountered resolving symbol values statically. Calling function 'flyInOut', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function

但是只有在使用AOT编译时才会发生。如果我将aot标记设置为false，那么它可以正常工作。

这是我的功能：

export function flyInOut(enter: string, leave: string, duration?: number): AnimationMetadata {
  const timing: number = duration || 100;
  return trigger('flyInOut', [
    state('in', style({ transform: 'translateX(0)' })),
    transition('void => *', [
      style({ transform: `translateX(${enter})` }),
      animate(timing),
    ]),
    transition('* => void', [
      animate(timing, style({ transform: `translateX(${leave})` })),
    ]),
  ]);
}

有关如何使其与AOT编译一起使用的任何想法？

Answer 1

这是official repo中跟踪的已知问题。在我们的函数中使用变量时会发生此问题。解决方法是从另一个导出函数获取结果：

export function flyInOut(enter: string, leave: string, duration?: number): AnimationMetadata {
  return trigger('flyInOut', [
    state('in', style({ transform: 'translateX(0)' })),
    transition('void => *', [
      style({ transform: getTranslate(enter) }),
      animate(getDuration(duration)),
    ]),
    transition('* => void', [
      animate(100, style({ transform: getTranslate(leave) })),
    ]),
  ]);
}

在上面的示例中，我们调用了getTranslate和getDuration，而不是使用duration，enter和leave变量。然后，我们导出那些返回正确值的函数：

export function getDuration(duration: number): number {
  return duration || 100;
}

export function getTranslate(value: string): string {
  return `translateX(${value}%)`;
}

使用AOT编译创建可重用的动画

1 个答案: