在动态组件加载中导航时如何跟踪组件答案

【问题标题】：how to keep track of components when navigating in dynamic component loading在动态组件加载中导航时如何跟踪组件
【发布时间】：2019-09-29 13:18:57
【问题描述】：

我们有 3 个基本导航显示隐藏选项卡视图 tab1、tab2、tab3。除此之外，还有来自sidenav的导航。

每个选项卡都动态加载组件，因此我们从一个组件导航到另一个组件。

其次，当从一个组件到另一个组件的导航结束并且用户单击Done 按钮时，它应该降落在最初在 DOM 中打开的 tab1/tab2/tab3 上（即导航结束并降落在 tab1/tab2 /tab3 视图），当组件导航开始时。

当我们向后导航时，我们无法加载前一个组件，因为每个组件都被不同的组件使用，并且可能是不同导航流程的一部分。

在这里，路由不仅仅涉及将组件加载到视图中。

考虑到给定的场景，是否有角度的方法来实现这一点？

这里是stackblitz链接：

【问题讨论】：

【解决方案1】：

您的状态管理似乎有问题。

我建议您使用在层次结构中足够高的模块中声明的服务，以便它可以在您的组件中可见，您可以在其中保存数据。

您无法保留组件内部的状态，因为它已被销毁，但您可以使用服务来保留您的状态并将其作为输入传递到组件中，以便使用您想要的数据对其进行初始化。

同样，我会对您想要实现的导航逻辑执行相同的操作。我会利用路由器参数来选择/显示所需的选项卡和一个服务，作为我的数据状态的存储

【讨论】：

如果一轮导航流程是10次或更多，那么存储所有10个状态和数据是否是个好主意。
好吧，您可以将数据发布到服务器并在再次进入视图时获取它们，但如果这不是一个选项，并且由于某些业务逻辑，您只能在发布它们之前在本地“保存”它们，好的。您必须保留要显示的内容。很可能您只需要每个视图/组件的最后一个状态。如果你想要更多，你可以使用 Observable 流。阅读@favdev 提到的行为主题和可观察对象以及 NgRx 存储
这会花费太多精力并且可能会出错，因为我不完全了解这些要求。但我想你会发现我们在这里讨论的所有内容 --> stackblitz.com/edit/angular-observables 。它利用了我提到的一切。使用现有数据路由参数、可观察对象、服务和初始化

【解决方案2】：

使用Angular router 而不是创建/销毁组件。 /home/tab1 /home/tab2 settings/tab1 之类的东西可以帮助用户掌握他们在应用程序中的位置。

我同意安东尼斯所说的有关状态管理的内容。根据您的应用程序的复杂性，我建议您使用像 NgRx 这样的库而不是服务来管理您的数据。

【讨论】：