Angular 2 AoT 编译器动画回调错误答案

【问题标题】：Angular 2 AoT compiler animations callback errorAngular 2 AoT 编译器动画回调错误
【发布时间】：2017-01-13 17:43:05
【问题描述】：

我有 Component 定义如下：

@Component({
    moduleId: module.id,
    templateUrl: 'my.template.html',
    animations: [
      trigger('fadeInOut', [
        state('in', style({opacity: 1})),
        transition('void => *', [
            style({
                opacity: 0
            }),
            animate(500)
        ]),
        transition('* => void', [
            animate(500, style({
                opacity: 0
            }))
        ]),
    ])
  ]
})
export class MyComponent implements OnInit, OnDestroy {
    public stage: number = 0;
    ...
    transitionDone(transitionEvent: any): void {...}
    ...
}

模板看起来像这样：

<div
    *ngIf="stage"
    @fadeInOut
    (@fadeInOut.done)="transitionDone($event)"
></div>

应用程序在使用 JIT 编译时工作正常，并且 done 回调被正确触发，但是当我尝试使用 ngc (v. 0.6.0) 编译它时，它给了我一个错误：

提供的参数与调用目标的任何签名都不匹配。

这是因为它为 AnimationOutput 生成参数数量错误的 ngfactory 文件：

this.registerAnimationOutput(
    this._el_0,
    new import24.AnimationOutput('fadeInOut','done'), <-- should be 3 args
    this.eventHandler(this._handle__fadeInOut_done_0_1.bind(this))
);

如果我从模板中删除 done 回调，编译工作。

我正在使用 Angular 2 RC.6

【问题讨论】：

标签： javascript angular compiler-errors

【解决方案1】：

更新：它正在处理角度“2.0.2”

我也有同样的问题，看起来角度动画或 AOT 编译器存在内部错误。

您可以在这里跟踪进度：https://github.com/angular/angular/issues/11707

【讨论】：

是的，实际上我创建了这个问题，在超过 3 周没有得到回复后：)
@m.cichacz 干得好，我也在等待解决同样的问题:)