为什么在此代码示例中需要@Output EventEmitter？

Question

我目前正在阅读有关Angular 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是如何工作的，因为它甚至没有被父对象上的任何东西订阅。但是，必须在其中放置它，并且还必须将其称为counterChange才能起作用。

文章的作者说

我们需要做的下一件事是引入一个具有相同名称的@Output（）事件，外加Change后缀。每当计数器属性的值更改时，我们都希望发出该事件。让我们添加一个@Output（）属性，并在设置侦听器中发出最新的值：

为什么我们需要使用相同的名称加上更改后缀？这是我不知道的某种Angular约定吗？我只是想弄清楚我错过了哪个基本概念，因此我可以理解它是如何工作的。

如果有帮助，我在这里有很多代码。

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

Answer 1

@Output（）装饰器使counterChangeEventEmitter可以在Angular事件语法-中使用(event name)="function()"。

在这种情况下，让您感到困惑的是Angular将[(counter)]语法（称为“盒子里的香蕉”）解糖为的能力[counter]="..." (counterChange)="..."。换句话说，*Change当看到[（属性名称）]语法时，Angular会将后缀附加到属性绑定值上。我希望这能回答第一个问题。

至于为什么我们需要使用相同的名称加change后缀？，这是一种Angular约定，有助于利用“盒子里的香蕉”语法。

强烈推荐此博客文章，详细介绍Angular模板语法：

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