このコード例で@Output EventEmitterが必要なのはなぜですか？

Question

私は現在、Angular 2の2方向データバインディングとこの記事を読んでいます。この記事で

https://blog.thoughtram.io/angular/2016/10/13/two-way-data-binding-in-angular-2.html

、コンポーネント内の値は、その親に可変に結合することを可能に@Inputと@outputと子コンポーネントがあります。

export class CustomCounterComponent { 

    counterValue = 0; 
    @Output() counterChange = new EventEmitter(); 

    @Input() 
    get counter() { 
    return this.counterValue; 
    } 

    set counter(val) { 
    this.counterValue = val; 
    this.counterChange.emit(this.counterValue); 
    } 

    decrement() { 
    this.counter--; 
    } 

    increment() { 
    this.counter++; 
    } 
} 

親HTML私のためにそう

<custom-counter [(counter)]="counterValue"></custom-counter> 
<p><code>counterValue = {{counterValue}}</code></p> 

@Inputが必要な理由を、私は理解して - それはさえに何が加入されていないので、私は@output counterChangeがどのように機能するかを理解していないしかし、親。しかし、それをそこに持ち、カウンターチェンジを働かせておく必要があります。

記事の著者は、

を言う私たちが行う必要がある次のことは、 同じ名前、プラスの変更接尾辞で@output（）イベントを導入することです。 counterプロパティの値が変更されるたびに、そのイベント（ ）を送出します。のは、セッター 迎撃に最新の値を @output（）プロパティを追加し、放出してみましょう：

は、なぜ私たちは、同じ名前のプラスの変化サフィックスを持っている必要がありますか？これは私が気付いていない角型のコンベンションですか？私が逃した基本的なコンセプトを理解しようとしているので、これがどのように機能しているのか理解できます。

私が助けてくれるなら、ここにコードの大部分があります。

https://plnkr.co/edit/BubXFDQ59ipxEdnEHWiG?p=preview

Answer 1

@output（）デコレータは角イベント構文で使用されるcounterChange持つEventEmitter可能 - (event name)="function()"を。

この場合、あなたは[(counter)]の構文（「バナナの箱」と呼ばれる）の角度を[counter]="..." (counterChange)="..."に限定する機能があります。つまり、Angularは、[（プロパティ名）]構文を見たときに、プロパティのバインド値に接尾辞*Changeを追加します。 これが最初の質問に答えることを願っています。

についてなぜ同じ名前にchangeという接尾辞を追加する必要がありますか？、これは 'バナナの箱'構文を利用するのに役立つ角のある規則です。

は非常に詳細に角度テンプレートの構文を説明し、このブログの記事をお勧めします。

https://vsavkin.com/angular-2-template-syntax-5f2ee9f13c6a#4930