Angular 嵌套路由器出口子项在路由器动画完成之前消失

Question

场景

我有一个带有嵌套路由的 Angular 应用程序。父路由器出口有一个滑动动画。子组件之一（本质上是根页面之一）有自己的路由器出口，但子路由器出口没有动画。

问题

滑动动画在所有根组件中运行良好。但是，当我在带有嵌套路由器插座的根组件处时，会发生一件奇怪的事情。如果我从它导航到另一个根组件，它的内容（当前子组件）会在路由动画完成之前消失。

一个例子

我创建了以下 stackblitz 来说明这个问题：https://stackblitz.com/edit/angular-ivy-9gbzax

在示例中，如果您在第 1 页和第 2 页之间导航，则不会出现任何问题。如果您尝试从 page3.child1 导航到第 1 页或第 2 页，内容（子组件）将在动画终止之前消失。有什么办法可以让内容一直持续到动画结束？

Answer 1

所以我能够解决这个问题，尽管是以一种 hacky 的方式。我所做的是为离开路线的 children 设置动画。我在组动画中添加了以下内容：

query(':leave *', [
    style({}),
    animate(1, style({}))
], optional)

查看实际解决方案：https://stackblitz.com/edit/angular-ivy-7gskcz，解决方案是文件中的最后几行 animations.ts

Angular Nested Router Outlet Children Disappear Before Router Animation Completes