Angular 2/TypeScript：@Input/@output 还是输入/输出？

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

提问by ShadowCore

While doing a course on Udemy we have been allowing components to be passed data dy using the @Input()decorator in the component class.

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

While reading through ngBook-2 I have found that there is another approach by using the inputproperty inside an @Componentdecorator.

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

THISsimilar question on SO, One person answered:

这对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.

使用输入的优点之一是类的用户只需要查看传递给@Component 装饰器的配置对象即可找到输入（和输出）属性。

and look through documentationstate that:

并查看文档说明：

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

无论您使用输入/输出还是@Input/@Output，结果都是相同的，因此选择使用哪个在很大程度上是一种风格决定。

Really, the most useful information about this is mostly conflicting depending on where you look.

确实，关于此的最有用的信息大多是相互矛盾的，具体取决于您查看的位置。

Inside @Component

内部@Component

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

class ProductImage {
  product: Product;
}

Inside Class

内课

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

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

Things I would like to know

我想知道的事情

• What one would be more of "best practice" usage?
• When would you use one over the other?
• Are there any differences at all?

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

回答by adriancarriger

Angular 2 Style Guide

Angular 2 风格指南

According to the official Angular 2 style guide, STYLE 05-12says

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

Douse @Inputand @Outputinstead of the inputs and outputs properties of the @Directiveand @Componentdecorators

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

The benefit is that (from the guide):

好处是（来自指南）：

• It is easier and more readable to identify which properties in a class are inputs or outputs.
• If you ever need to rename the property or event name associated with @Inputor @Output, you can modify it a single place.
• The metadata declaration attached to the directive is shorter and thus more readable.
• Placing the decorator on the same line makes for shorter code and still easily identifies the property as an input or output.

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

I've personally used this style and really appreciate it helping keep the code DRY.

我个人使用过这种风格并且非常感谢它帮助保持代码DRY。

回答by Milad

One of the cool thing that I know you can do with decorators but I'm not if it's possible with the other way, is aliasing the variable:

我知道你可以用装饰器做的一件很酷的事情是给变量取别名：

export class MyComponent {

 @Output('select') $onSelect = new EventEmitter<any>(); // this is aliased

 @Output() finish  = new EventEmitter<any>(); // not aliased

 sendUp(){
    this.$onSelect.emit('selected'); 

    this.finish.emit('done');
 }
}

and then from outside :

然后从外面：

 <my-component (select)="doSomething($event)"></my-component>

---

---

The other one is setting a default value, you can set default value in both ways but decorators seem more convenient and less code.

另一种是设置默认值，你可以通过两种方式设置默认值，但装饰器看起来更方便，代码更少。

@Component({ 
  selector:'my-component'
})
export class MyComponent {
  @Input() id = 'default-id';     

  ngOnInit(){

    console.log('id is : ',this.id); // will output default-id if you don't pass anything when using the component
  }
}

So in this case , if the consumer doesn't pass the id as an input, you still have default-id;

所以在这种情况下，如果消费者没有将 id 作为输入传递，你仍然有default-id；

 <my-component></my-component>;

Where as , if you wanted to do this with inputs array , you'd do :

哪里，如果你想用输入数组来做到这一点，你会这样做：

@Component({ 
  selector:'my-component',
  inputs:['id']
})
export class MyComponent {
  private id = 'default-id';     

  ngOnInit(){

    console.log('id is : ',this.id); // will output default-id if you don't pass anything when using the component
  }
}

The result is the same , but if you notice , in this case you have to put idboth in inputs arrayand define it inside the class.

结果是一样的，但如果你注意到了，在这种情况下你必须把id都放在输入数组中并在类中定义它。

EDIT:

编辑：

Apparently aliasing with outputs[] is also possible, like bellow :

显然，输出 [] 的别名也是可能的，如下所示：

@Component({
  selector: 'my-component',
  template: `
   <button (click)="sendUp()">Send up</button>
  `,
  outputs: ['$onSelect: select']
})
export class ChildComponent {
  $onSelect = new EventEmitter<any>(); // this is aliased

  sendUp() {
    this.$onSelect.emit('selected');
  }
}

But again you have to define it in two places , on in the array and one in the class , so I'd still prefer the decorators.

但同样你必须在两个地方定义它，在数组中和一个在类中，所以我仍然更喜欢装饰器。