Установите параметр угловой анимации с помощью Host Binding

Question

Я пытался установить параметр анимации, используя @HostBinding декоративный, но вроде не работает, чего мне не хватает

animations: [
    trigger('animateMe', [
      state('void', style({ opacity: 0 })),
      transition(':enter, :leave', [ // void <=> *
        animate('{{ easeTime}}ms {{ transitionTimingFn }}')
      ])
    ])
  ]

и HostBinding

@HostBinding('@animateMe') state = {
    value: 'void',
    params: {
      easeTime: 5000
    }
  };

Answer 1

Если вы добавите функцию получения в свойство привязки хоста, вы можете установить параметры анимации.

trigger: any;
easingTime = 5000;

@HostBinding('@animateMe') 
get fn() {
    return {
        value: this.trigger,
        params: {
            easeTime: this.easingTime
        }
    }
};

Answer 2

Анимации в элементе хоста должны обрабатываться примерно так:

animations: [
    trigger('toggleDrawer', [
        state('closed', style({
            transform: 'translateX(0)'
        })),
        state('opened', style({
            transform: 'translateX(80vw)'
        })),
        transition('closed <=> opened', animate(300))
    ])
]

И HostBinding / HostListener

private state: 'opened' | 'closed' = 'closed';

// binds the animation to the host component
@HostBinding('@toggleDrawer') get getToggleDrawer(): string {
    return this.state === 'closed' ? 'opened' : 'closed';
}

@HostListener('@toggleDrawer.start', ['$event']) startDrawerHandler(event: any): void {
    console.log(event);
}

@HostListener('@toggleDrawer.done', ['$event']) doneDrawerHandler(event: any): void {
    console.log(event);
}

Принимая во внимание, что HostListeners будут выполняться при загрузке с событием из состояния void (fromState: "void"), я не знаю, можно ли это предотвратить из объявления анимации или вам нужно только сделать условие внутри HostListeners, если вы хотите что-то предотвратить.

Answer 3

К сожалению, это не будет работать, так как анимации создаются до того, как компонент будет фактически сгенерирован (этот код находится в метаданных @Component).

Любой код за пределами класса не будет находиться в той же области видимости.

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

  <ul>
    <li *ngFor="let hero of heroes"
        (@flyInOut.start)="animationStarted($event)"
        (@flyInOut.done)="animationDone($event)"
        [@flyInOut]="'in'">
      {{hero.name}}
    </li>
  </ul>

Ссылка: https://angular.io/guide/animations