Могу ли я использовать входную переменную для запуска анимации в дочернем компоненте?

Question

У меня есть анимация, которую я хочу выполнить, когда * ngFor l oop заканчивает

ngAfterViewInit(): void {
  this.items.changes.subscribe(t =>{
   Promise.resolve().then(t => {
     this.everythingLoaded();
   })
  })
 }

Когда они заканчиваются, я вызываю функцию everythingLoaded, которая генерирует событие для родительского компонента, чтобы изменить значение из скрытия, чтобы показать

 everythingLoaded(){
   this.showAnimation.emit();
 }

<app-photo-display [animateHide]=animateHide (showAnimation)='setShow()'></app-photo-display>

Затем эта функция изменяет свойство ввода, управляющее моей анимацией

animations: [
    trigger('animState' , [
      state('show', style({
       opacity: 1
      })),
      state('hide', style({
        opacity: 0 
      })),
      transition('show => hide', animate('600ms ease-out')),
      transition('hide => show', animate('1000ms ease-in'))
    ])
  ]

<img [@animState]="doWeShow ? 'show' : 'hide'" *ngFor="let item of items;"> 

Анимация не запускается при изменении значения ввода

 hideAnimation(){
    this.animateHide = false;
  }
  setShow(){
    this.animateHide = true;
  }

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

Извините, что давно затянулся, спасибо за ваше время

Answer 1

Вы запускаете animation с помощью doWeShow, но фактически никогда не меняете значение с doWeShow, но вместо этого вы только меняете значение this.animateHide на show или hide и помещаете его в компонент как input. Также убедитесь, что для вашего компонента <app-photo-display> установлен changeDetection: ChangeDetectionStrategy.OnPush. Посмотрите здесь: https://blog.ninja-squad.com/2018/09/27/angular-performances-part-4/