В чем разница между @Input и входами в компонентах Angular2?

Я размышляю над этой проблемой и не могу найти никакого объяснения.

При передаче параметров компоненту в 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;
}

И я действительно видел код, который использует оба в одно и то же время. Может ли кто-нибудь объяснить, каковы различия между ними?

/Rickard

Ответ 1

Хотя Эрик уже дал ответ в комментариях, я добавлю свои 2 цента.

Одним из преимуществ использования inputs является то, что пользователям класса нужно только посмотреть объект конфигурации, переданный декоратору @Component чтобы найти свойства ввода (и вывода).

Одним из преимуществ использования @Input является то, что мы можем определить тип и быть ли он приватным или публичным:

@Input() public attr: string;

Обратите внимание, что в руководстве по стилю рекомендуется использовать @Input:

Используйте @Input и @Output вместо свойств inputs и outputs декораторов @Directive и @Component.

Ответ 2

Еще один быстрый совет - использование входов вместо декоратора @input при использовании машинописного текста может привести к сбою вашей сборки, поскольку он не распознает переменные, которые вы определили в декораторе @components. глупый, но раздражающий... вот почему я пришел сюда в первую очередь.

Я также рекомендую придерживаться постоянно действующего руководства по стилю, которое рекомендует использовать @input

Ответ 3

Это правда, что @Input позволяет легко определить тип, область действия и значения по умолчанию, но наличие геттеров и сеттеров означает, что функциональность фактически одинакова для обоих методов.

Я не собираюсь предлагать использовать inputs через @Input, и я согласен с другими плакатами, что лучше придерживаться текущего руководства по стилю, но я нашел полезное упражнение для сравнения двух подходов, когда я наткнулся на них себя.

Ниже приведено более полное сравнение, также использующее геттеры и сеттеры, чтобы, надеюсь, продемонстрировать различия в макете и сходстве в поведении.

Использование 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;
  }
}