时间戳

首页 > 解决方案 > 在 Angular 中，事件发射器上的后缀“更改”是否在内部做一些特殊的事情

angular - 在 Angular 中，事件发射器上的后缀“更改”是否在内部做一些特殊的事情

问题描述

我不确定我是否在这里有心理扭曲，或者我是否刚刚学到了一些新东西。

我有一个具有以下输入和输出的组件。

  @Input() open: boolean = false;
  @Output() openChange = new EventEmitter<boolean>();

在我的代码中：

  toggle(e) {
    this.open = !this.open;
    this.openChange.emit(this.open)

  }

现在，在我的父组件中，我可以成功地使用双向数据绑定到组件：

<app-foo [(open)]="value"> Is Open: {{open}}

这让我摸不着头脑。如果我将输出更改为这样

 @Output() openChangeX = new EventEmitter<boolean>();
//...
    this.openChangeX.emit(this.open)

甚至

 @Output() openXChange = new EventEmitter<boolean>();
//...
    this.openXChange.emit(this.open)

双向数据绑定不再起作用。我所做的只是更改名称。将“更改”添加到匹配的输入变量是否在 Angular 内部做一些允许这样做的事情。我找不到任何关于此的文档。我还删除了该this.openChange.emit(this.open)行并将其替换为this.cd.detectChanges()想知道事件是否强制重新读取open变量。没运气。

在我看来， varx 和 varxChange 会导致某种我不知道的关系。任何澄清将不胜感激，即使只是指向我忽略的现有文档的指针。

标签： angular

解决方案

看了这个之后，我终于找到了这篇文章。

https://medium.com/@preethi.s/angular-custom-two-way-data-binding-3e618309d6c7

所以是的，似乎添加“更改”确实会产生影响。

这里的神奇之处在于事件名称 amountChange 中的后缀“Change”。如果属性绑定名称为“x”，则事件绑定名称应为“xChange”。只有这样 Angular 才能识别banana-in-a-box [()] 语法。

推荐阅读