Question

我正在思考这个问题而无法找到任何解释。

将参数传递给Angular2中的Component时

鉴于

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

似乎有两种接受attr bound值的方法：

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

或者你这样做：

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

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

/里卡德

Answer 1

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

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

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

@Input() public attr: string;

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

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

Answer 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;
  }
}

Answer 3

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

我还建议坚持使用@input

的正在进行的样式指南

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

3 个答案: