嵌套路由立即消失而不是播放 :leave 动画答案

【问题标题】：Nested route disappear immediately instead of playing :leave animation嵌套路由立即消失而不是播放 :leave 动画
【发布时间】：2017-11-15 21:42:06
【问题描述】：

我有外部路线：/posts 和 /about。 /posts 路由有嵌套路由：/ 和 /pages/:pageNumber。

在嵌套路线（/ 和 /pages/:pageNumber）之间导航时，动画效果很好。但是当导航到/about时嵌套路由立即消失。

animateChild() 没有帮助。在父路由组件动画中：

transition(':leave', [
  query('@*', animateChild()),
  animate('/*some easing*/', style({/*some styles*/}))
])

这会导致错误query("@*") returned zero elements.。所以嵌套路由立即被移除，父组件看不到。

Angular 版本：4.2.2

【问题讨论】：

【解决方案1】：

对我来说，问题的原因是，当从 /page1 导航到 /page2 时，在 page2.component.ts 中，我从服务器加载了一些数据在构造函数中。将代码移到 ngOnInit 解决了这个问题，经过 2 周的折腾。

【讨论】：