【问题标题】：Angular 2: What is an @Input/@Output alias?Angular 2：什么是@Input/@Output 别名？
【发布时间】：2016-12-25 08:15:26
【问题描述】：

在阅读@Input() 和@Output() 时，我发现我们可以使用别名来代替装饰器的属性名称。

示例

  class ProductImage {
    //Aliased
    @Input('myProduct') product: string;

    //Un-aliased
    @Input() product: string;//not aliased
  }

HTML

//Aliased attribute
<SomeComponent [myProduct] = "Product Name"></SomeComponent>

//Un-aliased attribute
<SomeComponent [product] = "Product Name"></SomeComponent>

Angular 官方documentation 说：

有时我们希望输入/输出属性的公共名称不同于内部名称。属性指令经常出现这种情况。指令消费者期望绑定到指令的名称。例如，当我们将带有 myClick 选择器的指令应用于标签时，我们希望绑定到也称为 myClick 的事件属性。

还有This教程简单解释一下：

别名让我将属性名称覆盖为别名而不是原始属性名称

除此之外，我无法在 SO 上或通过 Google 找到关于别名 @Input() 和 @Output() 的任何其他内容。

我想知道的是：

“别名”试图实现什么？
我们应该经常使用“别名”吗？

【问题讨论】：

这取决于你和你的团队风格约定
如果您将输入绑定到私有属性，最好遵循 ts 样式指南并在名称前加上下划线，例如@Input('heroName') private _heroName
“'aliasing' 试图达到什么目的？” -- 使用别名可以实现 UI 的可靠和长期可测试性。当然，随着时间的推移，代码库的更改和变量的重命名等等，但如果定期实现别名，那么它允许构建 UI 测试，而不必担心变量名称的更改是否会破坏这些 UI 测试。

标签： javascript angular typescript

【解决方案1】：

就像你的名字和昵称。

在您的家庭内部，您可能被称为 Nic，而在您的家庭外部，为了让其他人合法地认识您，您应该被称为 Nicolas。

所以，如果我们考虑你的组件的类，你的家庭内部：

@Component({
  selector:'my-component'
})
export class MyComponent{
   @Output('nicolas') nic  = new EventEmitter<any>();


   someFunction(){
    // because we're inside the family ( inside this class ), instead of nicolas , we can call nic like this : 

   this.nic ...... ( which you'd normally emit an event ).

  }

}

但是从外面看，你仍然是 nicolas ，所以当有人想给你打电话时（使用那个事件发射器）它应该使用 nicolas；

 <my-component (nicolas)="onNicolasChanged($event)"></my-component>

请注意，我们不能这样做：

 <my-component (nic)="onNicolasChanged($event)"></my-component>

这是对该变量的别名。

另外，请阅读我的回答here：

【讨论】：

很好的解释。请记住，角度风格指南建议我们避免使用它，除非我们真的需要它。 angular.io/guide/styleguide#avoid-aliasing-inputs-and-outputs

【解决方案2】：

“别名”试图实现什么？

它只是根据您的需要重命名输入/输出变量。例如，如果有一个hero 对象，当它被选中时，它会被传递给另一个组件。在这种情况下，将其称为 selectedHero 是合适的。别名只是实现了这一点。

@Input('selectedHero') hero: string;

我们应该经常使用“别名”吗？

取决于您正在处理的上下文。它不是必需品。例如，它可以用来避免变量名冲突，或者代码的可读性。

【讨论】：

【解决方案3】：

实际上@Input 是在我们将父组件的数据发送给子组件时使用的，而@Output 反之亦然。例子是

parent.component.html

<p> Child first name is {{childfirstname}}</p>
<input placeholder="First Name" type="text" [(ngModel)]="firstname">
<button mat-button (click)="send()">Click Parent</button>
<app-child
[firstname]="firstname"
(sendfirstname)="reciveFirstname($event)"
*ngIf="flage">
<app-child>

父组件.ts

import { Component } from '@angular/core';
@Component({
  selector:.......
)}
export class ParentComponent {
  flage: boolean = false;
  firstname: string;
  childfirstname: string;
}
send() {
  this.flage = true;
}
reciveFirstname(firstname) {
  this.childfirstname = firstname;
}

Child.component.html

<p> Parent first name is {{firstname}} <br>
parent last name is {{lastname}} </p>
<input placeholder="First Name" type="text" [(ngModel)]="firstnamechild">
<button mat-button (click)="send">Send Parent</button>

child.component.ts

import { Component,Input, Output, EventEmitter } from '@angular/core';
@Component({
  selector:'app-child',
  ........
})
export class ChildComponent {
  firstnamechild: string;
  @Input() firstname: string;
  @Output()
  sendfirstname: EventEmitter<string> = new EventEmitter<string>();
  constructor() {}
  send() {
    this.sendfirstname.emit(this.firstnamechild);
  }
}

【讨论】：

【解决方案4】：

使用它的一个很好的理由是，如果您需要更改组件中的变量名，则无需在模板中更改它，因为它使用别名。如果另一个开发人员更改了该变量名，这是一种防止您的代码中断的简单方法。

【讨论】：