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（）事件相同的名称，加上更改后缀。我们要发出那个事件，只要计数器属性的值发生变化。我们来添加一个 @Output（）属性并在setter中发出最新值拦截器：

为什么我们需要具有相同的名称和更改后缀？这是某种我不知道的Angular惯例吗？我只想弄清楚我错过了哪个基本概念，这样我才能理解这是如何运作的。

如果有帮助的话，我会在这里找到代码。

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

Answer 1

@Output（）装饰器使counterChange EventEmitter可用于Angular事件语法 - (event name)="function()"。

在这种情况下，您遇到的是Angular将[(counter)]语法（在框中称为＃39;）称为[counter]="..." (counterChange)="..."的能力。换句话说，当看到[（属性名称）]语法时，Angular会将*Change后缀附加到属性绑定值。我希望这能回答第一个问题。

至于为什么我们需要使用相同的名称加上change后缀？，这是一个Angular惯例，有助于在框中使用＆＃39; banana？语法。

强烈推荐此博客文章详细解释Angular模板语法：

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

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

1 个答案: