何时使用@Input，何时不使用angular2

Question

我是 angular2 的新手。尝试以更好的方式理解@Input的用法。我们可以使用@Input将值从父组件传递给子组件。我们也可以创建一个服务变量并将其注入父组件，并可以在子组件中访问它们。哪种方式会更好？我通过路线决议获得这些价值。当没有绑定用户输入时，我对使用@Input感到怀疑。

Answer 1

通常有两种类型的组件 - Presentational和Container，或者有时也称为有状态和无状态。以下是来自this article的专家解释差异：

  

演示组件：

     

  
• 关注事物的外观。
  
• 仅通过道具接收数据和回调。
  
• 很少有自己的状态（当他们这样做时，它是UI状态而不是数据）。
  

     

容器组件：

     

  
• 关心事情的运作方式。
  
• 向表示或其他容器组件提供数据和行为。
  
• 通常是有状态的，因为它们往往是数据源。
  

演示组件应通过输入绑定以声明方式接收尽可能多的数据。容器组件应尽可能使用DI。

Answer 2

我只是在猜测，但它取决于用例。

如果您的子组件的行为类似于无状态组件，但依赖于父容器具有状态访问权限的数据，那么您可能希望使用输入将数据传递给子组件。

例如，我想到的一个案例是使用表单组和表单控件 容器跟踪表单组逻辑/状态的排序，如果表单是被动的则提交，将发送数据对象或者最少发送数据对象。

我自己并不熟悉，但有意义的输入用例是当您只渲染需要从父容器引用的一些数据的可视组件时。

希望有道理。 :)或者至少阐明一个用例嘿嘿

http://learnangular2.com/inputs/ “大多数开发人员需要知道如何将数据传递到组件中以动态配置它们。”

另一张好的图片指南：https://www.sitepoint.com/angular-2-components-inputs-outputs/

Answer 3

嗯，确切地说，@Input()与用户输入无关。它主要用于将数据从parent component传递到child component。我同意名称Input()导致混淆，但其用法不同。来service注入，这与parent-child无关。任何层次结构中的组件都可以根据需要独立注入services。最后，将数据从父级传递给子级的最佳方法是使用@Input()。