Анимации Angular 7 Route не работают во вложенном роутере - PullRequest
Новая
       47

Анимации Angular 7 Route не работают во вложенном роутере

0 голосов
/ 05 ноября 2018

В настоящее время я экспериментирую с Angular7 анимацией перехода маршрута , и у меня возникла следующая проблема:

В моем приложении есть элемент ввода, который имеет собственный модуль маршрутизации и <router-outlet>. Я пытаюсь добиться того, чтобы при изменении маршрута старый отображаемый компонент исчезал (opacity: 0) до появления нового компонента. Но, к сожалению, я не могу заставить его работать. Анимации не воспроизводятся вообще и отлаживаются, как объяснено в угловых документах: Анимация перехода и триггеры 

(@routeAnimation.start)="onAnimationEvent($event)"
(@routeAnimation.done)="onAnimationEvent($event)"

показывает, что анимация запускается только один раз (при загрузке страницы; и даже тогда она не воспроизводится), но не во время использования компонента навигатора для навигации по приложению.

Мой код выглядит так:

entry.component.ts 

@Component({
  selector: 'entry',
  templateUrl: './entry.component.html',
  styleUrls: ['./entry.component.css'],
  animations: [routeAnimation],
})
export class EntryComponent implements OnInit {

  constructor() { }

  ngOnInit() { }

  prepareRoute(outlet: RouterOutlet) {
    const animation = outlet.activatedRouteData['animation'] || {};
    return animation['value'] || 'WelcomePage';
  }
}

entry.component.html 

<navigator>
</navigator>
<div [@routeAnimation]="prepareRoute(o)" id="entry-content">
  <router-outlet #o="outlet" name="entry"></router-outlet>
</div>

Начальный routing.module.ts 

const routes: Routes = [
  {
    path: 'entry',
    component: EntryComponent,
    children: [
        {
            path: '',
            component: WelcomeComponent,
            outlet: 'entry',
            data: { animation: 'WelcomePage' }
        },
        {
            path: 'introduction',
            component: IntroductionComponent,
            outlet: 'entry',
            data: { animation: 'IntroductionPage' }
        }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class EntryRoutingModule { }

route.animation.ts 

export const routeAnimation = trigger(
  'routeAnimation', [
    transition('* => *', [
      group([
        query(':enter', style({ opacity: 0 })),
        query(':leave', [
          animate('0.5s', style({ opacity: 0 })),
          style({ display: 'none' })
        ], { optional: true }),
        query(':enter', [
          animate('2s',
          style({ opacity: 1 })),
          animateChild()
        ], { optional: true })
      ])
    ]),
  ]
);

Есть идеи, чего не хватает / что я делаю не так? Помощь очень ценится и большое спасибо заранее!

...