简体   繁体   English

Angular 2+ 应用程序中带有路由的选项卡

[英]Angular 2+ tabs with routing in application

im wondering how to do some kind of "internal tabs" in my application.我想知道如何在我的应用程序中执行某种“内部选项卡”。

I want to have multiple tabs with multiple nested components (managed by router) and want to keep data alive when im moving between tabs (like keep data in forms etc.), but want to change URL in URL bar in browser.我想有多个带有多个嵌套组件的选项卡(由路由器管理),并且希望在我在选项卡之间移动时保持数据活动(例如在 forms 等中保留数据),但想在浏览器中更改 URL 中的 ZE6B391A8D2C4D457902A23 栏。

Im talking about some kind of internal tabs in application, not multiple tabs in browser!我在谈论应用程序中的某种内部选项卡,而不是浏览器中的多个选项卡!

Do you have any tips how to achieve that?你有什么技巧可以做到这一点吗? Did anybody made some kind of feature?有人做了某种功能吗?

Thx谢谢

I do same functional in big project with multiple big components (CRM)我在具有多个大型组件 (CRM) 的大型项目中执行相同的功能

  1. Each main component must have data service (in service u store only values from varibales)每个主要组件都必须有数据服务(在服务中你只存储来自变量的值)
  2. All changes in component must work with data from data service组件中的所有更改都必须使用来自数据服务的数据
  3. Each main component listen NavigationEnd and when it happens save data from data service to tab每个主要组件侦听 NavigationEnd 并在发生时将数据从数据服务保存到选项卡
  4. When you return to this component from another at first u must set data from current active tab to your data service当您首先从另一个组件返回此组件时,您必须将当前活动选项卡中的数据设置为您的数据服务

我的项目中的示例图片

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM