Angular子路由器出口在父出口动画出来之前删除内容答案

【问题标题】：Angular child router-outlet removes content before parent outlet animates outAngular子路由器出口在父出口动画出来之前删除内容
【发布时间】：2019-04-15 19:11:44
【问题描述】：

我已经设置了一些与主应用程序路由器插座一起使用的动画，但是当其中一个路由有子插座和子插座时，当我离开时，子插座内容会立即被删除，从而否定动画。是否有某种方法可以使内容在导航时保持不变，以便在动画完成之前不会删除内容？也许还有另一个动画处理：留在那个儿童插座上？

包括 StackBlitz：https://stackblitz.com/edit/angular-7tfkp4

您会注意到，当您转到项目，然后导航离开时，子路由器插座中的内容会立即消失。

使用：

Angular CLI: 7.0.5
Node: 10.5.0
OS: win32 x64
Angular: 7.0.3
... animations, cdk, common, compiler, compiler-cli, core, forms
... http, language-service, material, platform-browser
... platform-browser-dynamic, router

【问题讨论】：

首先，我不明白“导航离开”是什么意思，一切看起来都在你的堆栈闪电战中。其次，文档是您想要的吗？ angular.io/guide/…
你能给我们看看代码吗？
@KiraAG 我已经包含了一个显示问题的 stackblitz 链接。
@wannadream 当你去项目，然后回家或附近时，项目中的内容（通过子路由器出口加载）立即消失，而不是等待动画首先完成。跨度>
我也将 stackblitz 网址更改为带有代码编辑器的网址。哎呀。

标签： angular angular-animations

【解决方案1】：

似乎问题可能是因为您没有路由器重用策略。

这里有一个很好的答案：https://stackoverflow.com/a/41515648/9097714，其中包含有关如何实现它的信息。

基本上，通过导航，您将丢弃最后一个视图，并在返回时完全重新渲染。当然，如果没有源代码，这只是一个有根据的猜测，如果有更多信息，它会更容易做出响应。

【讨论】：

有一个 Stackblitz 显示问题，如果有帮助的话。
是的，看来我需要缓存路由。感谢您为我指明正确的方向！
赞成。另请注意，link 提供了子路由动画的更详细实现。用于演示animations by mattias nimela。如果有人需要更清晰的理解，就把它放在那里。
@codephobia 我想知道你是否能够解决它？我试图了解在这种情况下路由策略将如何工作，因为（至少对我而言）它的用例似乎不同。可以使用它们返回给它们，但是在您的情况下，您可能希望稍后处理组件（即，一旦动画完成）。