首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >基于选项卡的angular2项目体系结构

基于选项卡的angular2项目体系结构
EN

Stack Overflow用户
提问于 2017-11-07 05:50:02
回答 2查看 47关注 0票数 0

这只是一个基于建议的问题。我真的很想让仪表盘快点。因此,需要帮助在父组件和子组件之间获取和共享基于本地和服务器的数据。

仪表板功能-

1)数据将是一个Metadata(资产文件夹中的json格式),它将包含高度、宽度、颜色和一些基于事件的数据。2)主要和重要的数据将来自图表和每个组件的服务器。3)有7个选项卡,每个选项卡都有以下几个组件:

表-1

它包含由选择器放置在父组件parent.component.ts上的5个组件,并通过其选择器中的输入属性注入数据。

表-2

它包含8个组件,通过它们的parent.component.ts放置在父组件selector上,并通过其选择器中的输入属性注入数据。

总的来说,有tab1、tab2、tab3.....on、parent.component.htmlrouter outlet的组件,因为仪表板在app.component.html上。

代码语言:javascript
运行
复制
'
'
'

数据获取,共享策略,以最小化no。服务中的ajax调用

考虑到上面的场景,这里应该采取什么策略来获取parent.component.ts中的数据并在所有组件之间共享,或者任何帮助的想法和策略都将是非常感激的。

问题是,我面临的问题是同时(同时)带来数据--就像一些数据来自服务器,其颜色来自本地文件夹中的“元数据”。怎么做?

EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-11-07 05:55:47

选项卡似乎是路由器的工作。将您的选项卡拆分为单独的模块,并将公共功能合并到一个或多个“共享”模块中。这将确保没有访问具有特定功能的页面的用户不会下载任何代码用户来实现该功能。

请注意,由于您使用的是路由器,共享公共数据必须通过服务来完成,而不是通过输入来实现(因为您的子程序实际上不会出现在模板中,因此没有“输入”的概念)。

为了最小化API调用的数量,需要实现某种类型的缓存机制。需要思考的一些问题:

  • 您期望数据多久更改一次?
  • 这是褶皱上方的数据吗?
  • 您期望用户等待多久才能获得数据?
  • 这些数据对您的页面有多重要?
票数 1
EN

Stack Overflow用户

发布于 2017-11-07 05:55:37

如果您从父组件获取数据,您可以在那里拥有一个服务,并且在订阅中您可以在组件上创建属性,这些属性是每个子组件所需的数据。然后,在html上,对于组件,您有一个@Input属性,并且只传递每个组件所需的数据。由于组件在本质上是哑的,它们“应该”更有表现力。由于您的数据仅在父组件上被请求,所以您只发出一个xhr请求。

根据有关颜色和数据的说明同时出现。如果组件上有“canActivate”,则可以抛出加载指示符,直到获取数据和元数据为止。然后在上面这样的子组件上将它们作为属性传递。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47150824

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档