场景
我有一个带有嵌套路由的 Angular 应用程序。父路由器 socket 有滑动动画。子组件之一(本质上是根页面之一)有自己的路由器导出，但子路由器导出没有动画。
问题
滑动动画在所有根组件中都运行良好。然而，当我位于具有嵌套路由器导出的根组件时，会发生奇怪的事情。如果我从它导航到另一个根组件，它的内容(当前子组件)会在路线动画完成之前消失。
示例
我创建了以下 stackblitz 来说明该问题:https://stackblitz.com/edit/angular-ivy-9gbzax
在示例中，如果您在页面 1 和 2 之间导航，则不会出现问题。如果您尝试从 page3.child1 导航到页面 1 或页面 2，内容(子组件)将在动画终止之前消失。有什么办法可以让内容一直持续到动画结束吗？
最佳答案
所以我能够解决这个问题，尽管是以一种黑客的方式。我所做的是为离开路线的 children 设置动画。我在组动画中添加了以下内容:
query(':leave *', [
style({}),
animate(1, style({}))
], optional)
要查看正在运行的解决方案:https://stackblitz.com/edit/angular-ivy-7gskcz ，解决方案是文件animations.ts中的最后几行
关于 Angular 嵌套路由器 socket 子项在路由器动画完成之前消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62700946/