Angular 7 Route 动画在嵌套路由器 socket 中不起作用

Question

我目前正在试验 Angular7 route transition animations并有以下问题:

在我的应用程序中有一个入口组件，它有自己的路由模块和 <router-outlet> .
我想要实现的是，每当路由改变时，旧的显示组件会在新组件淡入之前淡出( opacity: 0 )。但不幸的是，我似乎无法让它工作。
动画根本不播放，调试如 Angular 文档中所述:Animations transition and triggers

(@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>

entry-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 })
      ])
    ]),
  ]
);

任何想法缺少什么/我做错了什么？
非常感谢帮助，并在此先感谢!

Answer 1

在这里，你的
entry.component.html 将是，

<navigator>
</navigator>
<div class="parent-router-cls" [@routeAnimation]="o.isActivated ? o.activatedRoute : ''" id="entry-content">
  <router-outlet #o="outlet" name="entry"></router-outlet>
</div>

entry.component.scss

.parent-router-cls{
    position: relative;
    router-outlet ~ * {
        position: absolute;
        height: 100%;
        width: 100%;
    }
}

在这里，我认为您希望在所有路由器 socket 上都有动画，我认为不需要在 entry-routing.module.ts 中添加动画

data: { animation: 'WelcomePage' }

所以，你的 entry-routing.module.ts 将是，

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

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

和动画文件将是，

import {
    trigger,
    animate,
    transition,
    style,
    query,
    group
  } from '@angular/animations';
  
export const fadeAnimation = trigger('fadeAnimation', [
  transition('* => *', [
    query(
      ':enter',
      [style({ opacity: 0 })],
      { optional: true }
    ),
    query(
      ':leave',
      [style({ opacity: 1 }), animate('0.3s', style({ opacity: 0 }))],
      { optional: true }
    ),
    query(
      ':enter',
      [style({ opacity: 0 }), animate('0.3s', style({ opacity: 1 }))],
      { optional: true }
    )
  ])
]);