Angular 2/ typescript : @Input/@output or input/output?

Question

在 Udemy 上开设类(class)时，我们一直允许使用组件类中的 @Input() 装饰器向组件传递数据。

在阅读 ngBook-2 时，我发现还有另一种方法，即在 @Component 装饰器中使用 input 属性。

THIS SO上的类似问题，一个人回答:

One advantage of using inputs is that users of the class only need to look at the configuration object passed to the @Component decorator to find the input (and output) properties.

并查看 documentation声明:

Whether you use inputs/outputs or @Input/@Output the result is the same so choosing which one to use is largely a stylistic decision.

真的，关于这个的最有用的信息大多是相互矛盾的，这取决于你在哪里看。

@Component 内部

 @Component({
  selector: 'product-image',
  inputs: ['product'],
  template: `
  <img class="product-image" [src]="product.imageUrl">
})

class ProductImage {
  product: Product;
}

内部类

@Component({
  selector: 'product-image',
  template: `
  <img class="product-image" [src]="product.imageUrl">
})

class ProductImage {
  @Input() product: Product;
}

我想知道的事情

• 哪一个更像是“最佳实践”用法？
• 你什么时候会用一个而不是另一个？
• 有什么区别吗？

Answer 1

Angular 2 风格指南

据官方Angular 2 style guide , STYLE 05-12说

Do use @Input and @Output instead of the inputs and outputs properties of the @Directive and @Component decorators

好处是(来自指南):

• 识别类中的哪些属性是输入或输出会更容易且更具可读性。
• 如果您需要重命名与 @Input 或 @Output 关联的属性或事件名称，您可以在一个地方修改它。
• 附加到指令的元数据声明更短，因此更具可读性。
• 将装饰器放在同一行可以缩短代码，并且仍然可以轻松地将属性识别为输入或输出。

我个人使用过这种风格，非常感谢它有助于保留代码 DRY .