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

时间:2019-05-12 09:18:53

标签: angular angular-dynamic-components

我们有3个基本导航,分别显示隐藏Tab视图tab1,tab2,tab3。 除此之外,还有来自sidenav的导航。

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

第二,当从一个组件到另一组件的导航结束并且用户单击Done按钮时,它应降落在tab1 / tab2 / tab3中,以最初在DOM中打开的那个为准(即,导航结束并降落在tab1上) / tab2 / tab3视图),当组件导航开始时。

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

在这里,布线不仅仅涉及将组件加载到视图中。

考虑到给定的情况,是否有角度的方法来实现这一目标?

这是stackblitz链接:

https://stackblitz.com/edit/angular-basic-starter-dfqnp3?file=src/app/app.component.ts

2 个答案:

答案 0 :(得分:1)

您似乎对状态管理有疑问。

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

您无法在组件内部保留状态,因为它已被破坏,但是您可以使用服务来保留状态并将其作为输入传递给组件,以便可以使用所需的数据对其进行初始化。

同样,我将对您要实现的导航逻辑执行相同的操作。我将利用路由器参数来选择/显示所需的选项卡以及充当我的数据状态存储的服务

答案 1 :(得分:1)

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

我第二次回答安东尼斯所说的关于国家管理的问题。根据应用程序的复杂性,建议您使用NgRx之类的库,而不是使用服务来管理数据。