Angular 2 - 如何选择代表页面中组件和子组件的内容?

时间:2016-12-13 10:19:41

标签: angular components

使用Angular2启动项目,我想知道你们是否知道如何区分组件和子组件。我们如何决定以下架构的决定:

  1. 元素何时应由组件表示?何时开始使用子组件?
  2. 何时选择通过组件之间的服务进行通信?何时选择输入和输出指令?
  3. 什么应该被视为模块而不是组件?

3 个答案:

答案 0 :(得分:5)

这是一个模糊的问题,因为对所有事情都没有黄金法则。

  
      
  1. 元素何时应由组件表示?何时开始使用子组件?
  2.   

什么是组件?如果我们查看字典: 更大整体的一部分或元素 Angular中组件的概念是它们封装了所有逻辑,允许您在整个逻辑中重用它们应用。经验法则T-DRY(试着干),不要重复自己,如果你在几个组件上继续使用相同的逻辑,也许你可以将它提取到单个组件中并重新使用该组件。此外,它是一种减少html标记的好方法,例如查看堆栈溢出我们可以有答案/问题组件,标记对于两者都是相同的。但是在这个组件中,我们可能会有一些子组件,比如投票组件,配置文件组件,标签组件。

  
      
  1. 何时选择通过组件之间的服务进行通信?什么时候   选择输入和输出指令?
  2.   

这个很简单,你只使用输入输出当你的组件仅用作直接孩子而父母是负责提供逻辑或数据的人。为什么?如果您的路径直接指向您的组件,则无法输入和输出。另一个原因是,如果您的组件是深嵌套的孙子,您不希望继续通过组件传递输出 / 输入,这太麻烦了。

  
      
  1. 什么应该被视为模块而不是组件?
  2.   

我建议您也阅读官方Angular 2 style guide,其中的部分app structure & modules基本上是为每个功能创建模块,或者每个网址都有一个简单的应用程序。以下是该部分的引用:

  

为一个中的所有不同功能创建一个Angular模块   应用程序(例如英雄功能)。

     

将要素模块放在与要素相同的指定文件夹中   区域(.e.g app / heroes)。

     

将功能模块文件命名为反映功能名称的名称   区域和文件夹(例如app / heroes / heroes.module.ts)

     

将功能模块符号命名为反映功能名称的名称   区域,文件夹和文件(例如app / heroes / heroes.module.ts定义   HeroesModule)

     

为什么呢?功能模块可以从其他模块公开或隐藏其实现   模块。

     

为什么呢?特征模块识别不同的相关组件集   包含特征区域。

     

为什么呢?一个功能模块可以很容易地被急切地和懒惰地路由。

     

为什么呢?特征模块定义了特定的明确边界   功能和其他应用程序功能。

     

为什么呢?功能模块有助于澄清并使分配更容易   对不同团队的发展责任。

     

为什么呢?可以轻松隔离功能模块进行测试。

答案 1 :(得分:2)

  1. 当它执行某些操作时,您可以使用html / css;或者当您想要封装常见功能或外观时。

  2. 我发现最好使用" smart"组件。它们只有很少的模板代码,通常足以将数据委托给子组件 - " dumb"组件。另一方面,子组件有很多模板代码,但js / ts代码很少 - 足以定义输入/输出属性。

  3. 如果您有一个可以在其他项目中重复使用的常用功能,那么将它作为一个单独的模块可能是一个好主意。例如,一个登录表单及其逻辑,模板,样式,服务,管道......

答案 2 :(得分:2)

  1. 当您开始重复代码时,是时候使用组件了。一个很好的例子是'按钮'或者'输入' html标签,它们支持多种功能,如启用/禁用,只读,验证等。如果你每次都需要编码它们真的很烦,那么你应该将它们编码为组件一次,然后简单地编写它们的html标签而不是编码他们又来了。 此外,当某些内容变得过于复杂时,我希望将其作为一个组件,管理代码会更容易。
  2. 如果您在组件内部进行通信而从不在组件内部进行通信,则应该使用输入/输出装饰器,否则,如果要与非持久性组件或整个应用程序的组件进行通信,则应该使用服务。非持久性我的意思是如果你想与动态生成的组件进行通信,你应该使用这些服务。
  3. 我是模块的新手,所以我不想传播虚假信息,所以我不会对此说些什么。