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

Question

我正在尝试创建一个可重用的动画，但是在用角巩膜编译我的应用程序时，我得到了以下错误

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