Angular 7中的路由动画在嵌套的router-outlet中无法工作

Question

我目前正在尝试使用Angular7路由转场动画，遇到以下问题：

在我的应用程序中，有一个入口组件，它有自己的路由模块和<router-outlet>。 我想实现的是，每当路由改变时，旧的显示组件就会淡出（opacity: 0），然后新的组件淡入。但不幸的是，我似乎无法使它工作。 动画根本没有播放，并且按照Angular文档中所述进行调试：动画转换和触发器。

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

有什么遗漏或者我做错了什么吗？ 非常感谢您的帮助，提前致谢！

- Mick

---

你找到解决方案了吗？我也在为同样的问题苦苦挣扎。 - Shy Agam

我遇到了同样的问题，最终发现是由我的prepareRoute()方法引起的。我正在检查激活的路由数据以进行动画（如Angular文档中所述），但我希望在所有路由更改时进行转换，因此我没有使用路由数据来设置动画。在我的prepareRoute()方法中不需要检查路由数据，一切都很好！ :) - CICSolutions

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%;
    }
}

在这里，我认为您希望在所有router-outlet上添加动画，我认为不需要在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 }
    )
  ])
]); 

- Sunny Prajapati