Добавление состояния преобразования и событий преобразования с украшениями в Angular

Question

В данный момент я использую свойство метаданных host для добавления @transform, (@transform.start) а также (@transform.end) к хосту компонента.

Я хочу добавить эти события с помощью @HostBinding а также @HostListener украшения.

У кого-нибудь есть идеи, как это сделать?

Я попробовал следующее:

@Component({
  selector: 'sidenav',
  template: '<ng-content></ng-content>',
  animations: [
    trigger('transform', [
      state('open, open-instant', style({
        transform: 'translate3d(0, 0, 0)',
        visibility: 'visible',
      })),
      state('void', style({
        visibility: 'hidden',
      })),
      transition('void => open-instant', animate('0ms')),
      transition('void <=> open, open-instant => void',
        animate('400ms cubic-bezier(0.25, 0.8, 0.25, 1)'))
    ])
  ],
  host: {
    // '[@transform]': '_animationState',
    // '(@transform.start)': '_onAnimationStart($event)',
    // '(@transform.done)': '_onAnimationEnd($event)',
  },
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
})
export class SidenavComponent {
  @HostBinding('@transform') private transformState() {
    return this._animationState;
  }
  @HostListener('@transform.start', ['$event']) onTransformStart(event: AnimationEvent) {
    this._onAnimationStart(event);
  }
  @HostListener('@transform.end', ['$event']) onTransformEnd(event: AnimationEvent) {
    this._onAnimationEnd(event);
  }
}