Angular2コンポーネントの@Inputと入力の違いは何ですか？

Question

私はこの問題を熟考しており、何の説明も見つかりません。

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

そして私は実際に両方を同時に使用するコードを見ました。誰かがそれらの違いを説明できますか？

/リカード

Answer 1

エリックはすでにコメントで答えを提供しますが、私は私の2セントを追加します。

inputsを使用する利点の1つは、クラスのユーザーは、入力（および出力）プロパティを見つけるために@Componentデコレータに渡された構成オブジェクトを調べるだけで済みます。

@Inputを使用する利点の1つは、我々は型を定義し、それがプライベートまたはパブリックであるかどうかということです。

@Input() public attr: string; 

---

注@Inputを使用してスタイルガイドrecommendsその：

ドゥinputsおよびoutputsの代わりに@Inputおよび@Outputを使用してください。@Directiveおよび@Componentデコレータ。

Answer 2

もう一つの簡単なヒント - typescriptの使用中に@inputデコレータの代わりに入力を使用すると、@componentsデコレータで定義した変数が認識されないため、ビルドが失敗することがあります。愚かだが迷惑な... thatsなぜ私はここに最初にいた。私はまたに固執する推薦してい

、進行@inputを使用することをお勧めしますスタイルガイドを

Answer 3

@Inputは種類、範囲およびデフォルト値を簡単に定義することができますことを

それは本当ですが、ゲッターの可用性とセッターとは、両方の技術で機能が実質的に同じであることを意味します。

は私が@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; 
    } 
} 

を使用して

：

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