Angular выполнить анимацию в элементе дочернего компонента после анимации в app.component

Question

Приветствую вас, коллеги-разработчики,

в моем app.component. html У меня есть следующий код

 <div class="card m-3" [@routeAnimations]="getState(o)">
    <router-outlet #o="outlet"></router-outlet>
  </div>

код анимации

export const routerTransition = trigger('routeAnimations', [
  transition('* <=> *', [
    /* order */
    /* 1 */ query(':enter, :leave', style({ position: 'fixed', width: '100%'})
    , { optional: true }),
    /* 2 */ group([  // block executes in parallel
      query(':enter', [
        style({ transform: 'translateX(100%)' }),
        animate('0.6s ease-in-out', style({ transform: 'translateX(0%)' }))
      ], { optional: true }),
      query(':leave', [
        style({ transform: 'translateX(0%)' }),
        animate('0.6s ease-in-out', style({ transform: 'translateX(-100%)' }))
      ], { optional: true }),
    ])
  ])
])

Внутри <router-outlet> </router-outlet> среди других элементов следующий div

<div class="flex-container" [@fadeInOut] >
<!-- some content -->
</div>

с анимацией

export const fadeInOut =

  trigger('fadeInOut', [
    state('in', style({ opacity: 1, transform: 'translateY(0)' })),
    transition('void => *', [
      style({ opacity: 0, transform: 'translateY(100%)' }),
      animate(1500)
    ]),
    transition('* => void', [
      animate(1500, style({ opacity: 0, transform: 'translateY(100%)' }))
    ])
  ])

Как я могу выполнить анимацию fadeInOut после загрузки маршрутизатора с выполненной анимацией routerTransition? Я попытался предоставить только код, связанный с указанной проблемой. С уважением!

Answer 1

Итак, мне удалось добиться этого с помощью следующего кода: app.component. html

<div class="card m-3" [@routeAnimations]="getState(o)"
         (@routeAnimations.start)="start$.next($event)"
         (@routeAnimations.done)="done$.next($event)">
         <router-outlet #o="outlet"></router-outlet>
</div>

app.component.ts

  public start$: Subject<AnimationEvent> = new Subject();
  public done$: Subject<AnimationEvent> = new Subject();

component.ts

  ShowDevices: boolean;

  constructor(
    app: AppComponent
  ) {

    app.done$.pipe().subscribe(result => {
      // do special work here
      this.ShowDevices = true;
    });

компонент. html

  <div [@fadeInOut] *ngIf="ShowDevices">
<!-- Some content -->

  </div>

Надеюсь, это кому-то поможет!