使用 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

这是 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 编译创建可重用的动画

Creating a reusable animation using AOT compilation

javascript

angular

typescript

angular-cli

angular-animations