为什么`@input`装饰器比`inputs:[]`更受欢迎？

Question

在组件中定义输入有两种方式：

@Component({
    inputs: ['displayEntriesCount'],
    ...
})
export class MyTable implements OnInit {
    displayEntriesCount: number;

并且这个

@Component({
   ...
})
export class MyTable implements OnInit {
    @Input() displayEntriesCount: number;

我认为第一种方法更好，因为它明确声明了组件的依赖关系，而无需检查补充类。然而，著名开发者在这篇文章中表示，第二种方法更可取：

使用@Input是首选方法，但我们不必使用它。

有什么想法呢？

- courses.indepth.dev

Answer 1

这种写法在样式指南中有一定的推荐，但没有强有力的论据支持。 可能是因为属性和方法与绑定一起保持在一起。 但你的观点也是正确的。有些人喜欢这种写法，有些人则喜欢另一种。

如果你喜欢使用host: ...，那就直接使用它吧。这种写法仍然很常见。

- Günter Zöchbauer

---

谢谢，我不太明白“host: ...”是什么意思，您能详细解释一下吗？ - Max Koretskyi

抱歉，在阅读您的问题时没有足够的注意力。host 是一个类似于 inputs 和 outputs 的参数，具有像 @HostBinding() 和 @HostListener() 这样的装饰器（除了 @Input() 和 @Output()）。我所说的同样适用于 inputs、outputs 和 host。 - Günter Zöchbauer

Answer 2

按照 Angular 风格指南 https://angular.io/docs/ts/latest/guide/style-guide.html#!#-a-id-05-12-a-decorate-input-and-output-properties-inline，需要在属性上使用 @Input 和 @Output 装饰器，而不是在 @Directive 和 @Component 装饰器的 inputs 和 outputs 属性中使用：

请将 @Input() 或 @Output() 放置在与其修饰的属性相同的行上。

• 为什么？这样更容易和更可读地识别类中的输入或输出属性。

• 为什么？如果您需要重命名与 @Input 或 @Output 相关联的属性或事件名称，则可以在单个位置进行修改。

• 为什么？与指令附加的元数据声明更短，因此更易读。

• 为什么？将装饰器放在同一行上可以使代码更短，并且仍然可以轻松地识别该属性作为输入或输出。

- yurzui