Question

我已经将问题指向导出的函数。

animations.ts：

export function slideInRight(triggerName = 'slideInRight', unactivatedState = 'initial', activatedState = 'state-0', duration = '1s') {
  return trigger(triggerName, [
    state(unactivatedState, style({
      transform: 'translateX(-100%)'
    })),
    state(activatedState, style({
      transform: 'translateX(0)'
    })),
    transition(`${unactivatedState} => ${activatedState}`, animate(`${duration} ease-in-out`)),
    transition(`${activatedState} => ${unactivatedState}`, animate(`${duration} ease-in-out`))
  ]);
}

home.component.ts：

import { slideInRight } from 'animations'

@Component({
  // ...
  animations: [slideInRight('param1', 'param2')]
})
export class HomeComponent {}

尝试进行AOT编译时出现以下错误：

ERROR in Error遇到静态解析符号值。表达形式不受支持（原始.ts文件中的位置24:16），解析路径中的符号slideInLeft / to / project / angular / animations.ts，解析路径中的符号HomeComponent / to / project / angular / app / pages / home /home.component.ts，解析路径中的符号HomeComponent / to / project / angular / app / pages / home / home.component.ts

如果我在装饰器调用上注释掉这个动画属性，那么错误就会消失。我在这里做错了什么？

Answer 1

这里有一些对我有用的语法：

animations: [
    fadeInOut(),
],

和

export function fadeInOut(): AnimationEntryMetadata {
    return trigger("fadeInOut", [
        state("in", style({opacity: "1"})),
        transition("void => *", [
            style({opacity: "1"}),
            animate(100),
        ]),
        transition("* => void", [
            animate(100, style({opacity: "0.0"})),
        ]),
    ]);
 }

已经有一段时间了，但是如果我没记错的话，当我在fadeInOut（）中调用一个不能通过提前编译器进行静态分析的方法时，我在某一点上收到了类似的错误。我当时的解决方案是使我的动画方法完全自包含。

Answer 2

我使用动画的模板字符串时遇到了同样的问题。尝试重构转换以使用正常的字符串连接：

transition(unactivatedState + ' => ' + activatedState, animate(duration + ' ease-in-out')),
transition(activatedState + ' => ' + unactivatedState, animate(duration + ' ease-in-out'))

]）;

提前编译静态分析错误

2 个答案: