我正在思考这个问题,但无法找到任何解释.
将参数传递给Angular2中的Component时
特定
<my-component [attr]="someModelVariable"></my-component>
Run Code Online (Sandbox Code Playgroud)
似乎有两种接受attr bound值的方法:
@Component{(
selector: "my-component",
inputs: ["attr"]
)}
export class MyComponent {
}
Run Code Online (Sandbox Code Playgroud)
或者你这样做:
@Component{(
selector: "my-component"
)}
export class MyComponent {
@Input()
public attr: any;
}
Run Code Online (Sandbox Code Playgroud)
我实际上已经看到同时使用两者的代码,有人可以解释它们之间的区别是什么吗?
/里卡德
在阅读时@Input(),@Output()我发现我们可以使用别名而不是使用属性名称作为装饰器.
例
class ProductImage {
//Aliased
@Input('myProduct') product: string;
//Un-aliased
@Input() product: string;//not aliased
}
Run Code Online (Sandbox Code Playgroud)
HTML
//Aliased attribute
<SomeComponent [myProduct] = "Product Name"></SomeComponent>
//Un-aliased attribute
<SomeComponent [product] = "Product Name"></SomeComponent>
Run Code Online (Sandbox Code Playgroud)
官方Angular 文档说:
有时我们希望输入/输出属性的公共名称与内部名称不同.属性指令经常出现这种情况.指令消费者期望绑定到指令的名称.例如,当我们将带有myClick选择器的指令应用于标记时,我们希望绑定到也称为myClick的事件属性.
而本教程简要介绍它:
别名让我覆盖属性名称作为别名而不是原始属性名称
除此之外,我还无法在别名@Input(),@Output()SO或Google上找到任何其他内容.
我想知道的是: