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

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

这是官方存储库中跟踪的已知问题。在函数中使用变量时会出现此问题。解决方法是从另一个导出的函数获取该结果：

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}%)`;
}