Angular 2：什么是@ Input/@输出别名？

在阅读@Input()和@Output()时，我发现我们可以使用别名而不是使用装饰器的属性名称。Angular 2：什么是@ Input/@输出别名？

例

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>

官方的角度documentation说：

有时候，我们希望输入/输出特性的公用名称是differen t来自内部名称。属性指令通常是这种情况。指令消费者希望绑定到指令的名称。例如，当我们将带有myClick选择器的指令应用于标记时，我们希望绑定到也称为myClick的事件属性。

而且This教程简要介绍了它：

别名让我重写属性名称是别名，而不是原来的属性名

比，我还没有去过其他能够在SO上或通过Google找到别名为@Input()和@Output()的其他内容。

事情我想知道是：

什么是 '走样' 试图实现？
“别名”是我们应该经常使用的东西吗？

来源

2016-12-25 ShadowCore

这取决于你和你的团队风格约定 –

如果你的私人财产绑定输入，最好遵循ts styleguiders和前缀名称与下划线，例如。 @Input（'heroName'） private _heroName –

这就像你的名字和你的昵称。

在你的家人中，你可能被称为Nic，在你的家人之外，为了让其他人能合法地认识你，你应该被称为Nicolas。

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

@Coponent({ 
    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). 

    } 

}

但是，从外面，你还是尼古拉斯，所以当有人想对你打电话（使用事件发射器）它应该使用尼古拉斯;

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

请注意，我们不能做到这一点：

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

这是别名变量。

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

来源

2016-12-25 09:48:54 Milad

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

'别名'试图实现什么？

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

@Input('selectedHero') hero: string;

是 '走样' 的东西，我们应该经常使用？

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

来源

2016-12-25 08:25:53 raj

一个很好的理由去使用它，如果你需要的组件来改变变量的名字，你并不需要，因为它的使用，以改变它在你的模板别名。如果另一个开发人员更改该变量名，这是一种简单的方法来防止破坏您的代码。

来源

2017-11-26 19:59:55

Angular 2：什么是@ Input/@输出别名？

回答

相关问题