Angular2如何平衡组件和服务

时间:2016-04-12 20:21:13

标签: angular

我正在尝试使用angular2设计包含许多部件的配置文件(简历)页面。 这些部分是照片,联系,经验等。

双击文本时,每个部分都可以编辑。当任何部分处于编辑模式时,将显示两个按钮(保存和取消)。

A simple demo plunk is http://plnkr.co/edit/OQgaMz?p=preview

所以,我无法确定哪种方法适合我的情况。

  1. 单一组件和单一服务。
  2. 单一服务(单一)以保持应用程序状态和多个 零件。通过服务在组件之间共享状态。
  3. 单个服务和多个组件(父级和子级),正在审核 数据仅在服务中,通过父组件获取并通过@input传递给子级,以便使用@output进行交互。 应用状态是分布式的。

  4. 多个组件和多个服务之间的交互 组件。每个组件使用自己的服务获取自己的数据,并且 保持自己的状态。

  5. 你有什么建议吗?

1 个答案:

答案 0 :(得分:0)

对我来说:

1-难以维护 - 易于启动 - 脆弱的代码 - 如果只是要求非常明确并且不会扩展/扩展,我会选择它。

-- app
---- app.component.ts (your resume component)
---- app.module.ts
---- main.ts
---- app.routing.ts

2-这将最终为3,因为你需要一个包装所有组件的包装器,以使它们对用户可见,并且该包装器将是你的父组件 这是最好的方法,易于维护,服务可以注入所有组件,他们可以通过它进行通信,如果你想扩展你的简历 - 让我们说添加教育部分,然后你在简历下创建一个文件夹并添加相关组件。

-- app
---- app.module.ts
---- app.component.ts
---- app.routing.ts
---- main.ts (bootstrap)
---- resume (feature module called resume)
------ header (sub folder)
-------- header.component.ts|html|scss
------ experience (sub folder)
-------- experience.component.ts|html|scss
------ education (sub folder)
-------- education.component.ts|html|scss
------ shared
-------- resume.service.ts (manages you resume XHR)
------ resume.module.ts
------ resume.routing.ts

angular2 application structure

  1. 参考第2号
  2. 在这种情况下,你在简历模块中每个文件夹有一个服务,这太多了,如果你在后端实现微服务并且每个子模块(教育,标题等)将进行通信,那么这只是一个很好的选择使用独立服务,你没有api网关来包装它们。
  3. microservice- api gateway