Создание повторно используемой анимации с помощью компиляции AOT

Я пытаюсь создать многоразовую анимацию, но получаю следующую ошибку при компиляции моего приложения с angular- Кли:

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?


typescript javascript angular angular-cli angular-animations
person Will    schedule 24.10.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это известная проблема, отслеживаемая в официальном репозитории. Эта проблема возникает при использовании переменных внутри нашей функции. Обходной путь — получение этого результата из другой экспортированной функции:

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}%)`;
}
person Will    schedule 06.11.2017