【问题标题】:Angular 2+ tabs with routing in application在应用程序中带有路由的 Angular 2+ 选项卡
【发布时间】:2019-10-02 07:27:30
【问题描述】:

我想知道如何在我的应用程序中执行某种“内部选项卡”。

我想拥有多个带有多个嵌套组件的选项卡(由路由器管理),并且希望在选项卡之间移动时保持数据活动(例如在表单中保留数据等),但想在浏览器的 URL 栏中更改 URL。

我说的是应用程序中的某种内部选项卡,而不是浏览器中的多个选项卡!

您有什么技巧可以实现这一目标吗?有人制作了某种功能吗?

谢谢

【问题讨论】:

  • 是的,但如果您正在路由和更改 URL,那么数据将会丢失。另一种方法是将数据保存在数据服务中,这样您就可以将保存的数据重新分配给加载的组件再次
  • 所以,基本路由和单例服务......选项卡只是不同样式的菜单,您可以参考the documentation of routingdocumentation of services
  • 如果你想在多个组件之间持久化数据,考虑在你的应用中实现ngrx
  • @Chellappan 我强烈不同意这一点。这意味着一个不适合 Angular 的可选库的新学习曲线。
  • @ShivShankarNamdev 所以基本上,有一些数据保存服务的单例实例......并且每次选项卡更改时,从该数据服务重新加载适当的数据并填写表格?在发布这个主题之前,我正在考虑这个变体,但我不喜欢一件事 - 它不是面向类型的(也许我应该使用基本类型“对象”来存储服务中的数据?)

标签: angular url tabs router


【解决方案1】:

我在具有多个大型组件 (CRM) 的大型项目中执行相同的功能

  1. 每个主要组件都必须有数据服务(在服务中你只存储来自变量的值)
  2. 组件中的所有更改都必须使用数据服务中的数据
  3. 每个主要组件都监听 NavigationEnd 并在发生时将数据从数据服务保存到选项卡
  4. 当您首先从另一个组件返回此组件时,您必须将当前活动选项卡中的数据设置为您的数据服务

【讨论】:

    猜你喜欢
    • 2020-08-29
    • 1970-01-01
    • 2019-10-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-10-06
    • 2018-03-10
    • 2015-05-30
    相关资源
    最近更新 更多