Angular 2/TypeScript:@ Input/@输出或输入/输出？

Question

在Udemy上做一门课程的时候,我们一直在允许组件使用@Input()组件类中的装饰器传递数据.

在通过ngBook-2阅读时,我发现input在@Component装饰器中使用该属性还有另一种方法.

关于SO的这个类似的问题,一个人回答说:

使用输入的一个优点是类的用户只需要查看传递给@Component装饰器的配置对象以查找输入(和输出)属性.

并查看文档说明:

无论您使用输入/输出还是@ Input/@输出,结果都是相同的,因此选择使用哪一个主要是一种风格决定.

实际上,最有用的信息主要是相互矛盾的,具体取决于你的外观.

在@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

角度2风格指南

根据官方的Angular 2风格指南,STYLE 05-12说

不要使用@Input和@Output替代的输入和输出性能@Directive和@Component装饰

好处是(来自指南):

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

我个人使用这种风格,非常感谢它帮助保持代码干.