时间戳

首页 > 解决方案 > 角嵌套路由器插座子项在路由器动画完成之前消失

angular - 角嵌套路由器插座子项在路由器动画完成之前消失

问题描述

情景

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

问题

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

一个例子

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

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

标签： angularangular-ui-router

解决方案

所以我能够解决这个问题，虽然是以一种hacky的方式。我所做的是为离开路线的孩子制作动画。我在组动画中添加了以下内容：

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

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

推荐阅读