Angular2组件中@Input和输入之间有什么区别?

Ric*_*aaf 13 angular

我正在思考这个问题,但无法找到任何解释.

将参数传递给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)

我实际上已经看到同时使用两者的代码,有人可以解释它们之间的区别是什么吗?

/里卡德

Mar*_*cok 9

虽然埃里克已在评论中提供了答案,但我会加2美分.

使用的一个优点inputs是类的用户只需要查看传递给@Component装饰器的配置对象以查找输入(和输出)属性.

使用的一个优点@Input是我们可以定义类型以及它是私有的还是公共的:

@Input() public attr: string;
Run Code Online (Sandbox Code Playgroud)

请注意,样式指南建议使用@Input:

请使用@Input@Output代替和装饰器的inputsoutputs属性.@Directive@Component