@Input 和 Angular2 组件中的输入有什么区别？答案

【问题标题】：What is the difference between @Input and inputs in Angular2 Components?@Input 和 Angular2 组件中的输入有什么区别？
【发布时间】：2017-12-14 19:04:00
【问题描述】：

我正在思考这个问题，找不到任何解释。

在Angular2中向组件传递参数时

给定

<my-component [attr]="someModelVariable"></my-component>

似乎有两种接受attr绑定值的方式：

@Component{(
    selector: "my-component",
    inputs: ["attr"]
)}
export class MyComponent {
}

或者你这样做：

@Component{(
    selector: "my-component"
)}
export class MyComponent {
    @Input()
    public attr: any;
}

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

/里卡德

【问题讨论】：

没有区别，@Component() 是规范的地方。还要记住，有些用户使用纯 ES5（不使用 TypeScript）编写代码，因此他们需要一种无需装饰器的方式。

标签： angular

【解决方案1】：

虽然 Eric 已经在 cmets 中提供了答案，但我还是要加我的 2 美分。

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

使用@Input 的一个好处是我们可以定义类型以及它是私有的还是公有的：

@Input() public attr: string;

注意样式指南recommends 使用@Input：

请使用@Input 和@Output 代替@Directive 和@Component 装饰器的inputs 和outputs 属性。

【讨论】：

最后一件事也可以用输入来完成，因为你可以这样做：@Component{( selector: "my-component", inputs: ["attr"] )} export class MyComponent { public attr: string; }
@RickardStaaf，说得好。但是，这不太干，因为我们必须在两个地方重复 attr。
@Input( bindingPropertyName: string ) 装饰器也有一个参数。可用于创建别名。

【解决方案2】：

@Input 确实允许轻松定义类型、范围和默认值，但 getter 和 setter 的可用性意味着这两种技术的功能实际上是相同的。

我不建议使用inputs 而不是@Input，我同意其他发帖人的观点，即最好坚持当前的风格指南，但我确实发现比较两者是一个有用的练习当我自己遇到它们时就靠近了。

下面是一个更全面的比较，也使用 getter 和 setter 来展示布局的差异和行为的相似之处。

使用inputs

@Component({
    selector: 'my-component',
    template: '<h2>Value = {{ attr }}</h2>',
    inputs: ['attr']
})
export class MyComponent {

  public _attr: string;

  set attr(value) : void {
    console.log(`setter: ${value}`);
    this._attr = value;
  }

  get attr() : string {
    console.log(`getter: ${this._attr}`);
    return this._attr;
  }
}

并使用@Input：

@Component({
    selector: 'my-component',
    template: '<h2>Value = {{ attr }}</h2>'
})
export class MyComponent {

  public _attr: string;

  @Input()
  set attr(value: string) : void {
    console.log(`setter: ${value}`);
    this._attr = value;
  }
  get attr() : string {
    console.log(`getter: ${this._attr}`);
    return this._attr;
  }
}

【讨论】：

【解决方案3】：

另一个快速提示 - 在使用 typescript 时使用输入而不是 @input 装饰器可能会导致构建失败，因为它无法识别您在 @components 装饰器中定义的变量。愚蠢但令人讨厌......这就是我首先来到这里的原因。

我还建议坚持使用@input 的持续风格指南

【讨论】：