为啥此代码示例中需要 @Output EventEmitter？

Posted 2023-02-23

【中文标题】为啥此代码示例中需要 @Output EventEmitter？

【英文标题】：Why is the @Output EventEmitter required in this code example?为什么此代码示例中需要 @Output EventEmitter？

【发布时间】：2017-06-19 14:09:25

【问题描述】：

我目前正在阅读 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

【参考方案1】：

@Output() 装饰器使 counterChange EventEmitter 能够在 Angular 事件语法中使用 - (event name)="function()"。

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

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

强烈推荐这篇详细解释 Angular 模板语法的博文：

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

【讨论】：

谢谢。那篇文章澄清了很多事情