'AnimationEvent_2' 类型的参数不能分配给 'AnimationEvent' 类型的参数

Question

我正在尝试在 angular 中制作动画回调，但出现类型错误，该错误很容易用类型 any 抑制。我想了解为什么 AnimationEvent 不被打字稿接受。

我的组件：

import { Component } from '@angular/core';
import { animate, state, style, transition, trigger } from "@angular/animations";

@Component({
  selector: 'app-animation-callback',
  animations: [
    trigger('openClose', [
      state('open', style({
        height: '200px',
      })),
      state('closed', style({
        height: '100px',
      })),
      transition('open <=> closed', [
        animate('.1s')
      ]),
    ]),
  ],
  template: `
    <nav>
      <button (click)="toggle()">Toggle</button>
    </nav>

    <div
      [@openClose]="isOpen ? 'open' : 'closed'"
      (@openClose.start)="onAnimationEvent($event)"
      (@openClose.done)="onAnimationEvent($event)"
      class="open-close-container">
      Text
    </div>
  `,
})
export class AnimationCallbackComponent {
  isOpen = true;
  toggle() {
    this.isOpen = !this.isOpen;
  }

  onAnimationEvent(event: AnimationEvent) {
  }
}

编译时的错误：

 error TS2345: Argument of type 'AnimationEvent_2' is not assignable to parameter of type 'AnimationEvent'.

(@openClose.done)="onAnimationEvent($event)"
                                    ~~~~~~

Answer 1

尝试在您的组件中添加导入：

import { AnimationEvent } from "@angular/animations";

没有导入，使用的是typescript原生的Animated Event，是完全不同的类型。

'AnimationEvent_2' 类型的参数不能分配给 'AnimationEvent' 类型的参数

Argument of type 'AnimationEvent_2' is not assignable to parameter of type 'AnimationEvent'

angular

typescript

angular-animations

angular-template