Question

所以我有一个事件发射器正常工作。在我的孩子中，我称之为一个功能：

(click)="EnterEditMode()

发生火灾：

EnterEditMode(){ 
    this.enterEdit.emit(null);
  }

在我的父母那里，我接着：

  enterEdit(){
    console.log("got some text");
  }

这完美无瑕。但现在我想在它旁边添加第二个输出。所以在孩子身上，我打电话给：

SaveChanges();

触发功能：

SaveChanges() {
    this.saveChanges.emit(null);
    console.log("save");
  }

当我调用它时，会触发控制台日志，但不会触发emit。我的父母有一个从未被调用过的函数。

saveChanges() {
    console.log("saving changes");
    this.editing ? this.editing = false : this.editing = true;
  }

我真的无法看到我做错了什么，并试图解决问题，但我没有得到任何错误，只是控制台日志＆＃34; SaveChanges（）＆＃ 34;被称为。我错过了关于发射器的事情吗？

编辑以显示我的事件发射器

在我的孩子组件中我：

@Output() enterEdit = new EventEmitter<any>();
@Output() saveChanges = new EventEmitter<any>();

同样，enterEdit有效，但saveChanges没有......

Answer 1

所以这是由于对输出发射器如何在Angular中工作的基本误解。

错误的假设 只需触发发射器就会迫使我的控制器做出反应。

解决方案 在我的html文件中，我必须将侦听器添加到元素，然后将事件从html传递给控制器。这会触发控制器执行该功能应该执行的操作。

在我的.html文件中，我需要添加（saveChanges）=＆＃39; saveChanges（$ event）＆＃39;到我的自定义组件。这有效。

Answer 2

在我的情况下，只是事件发射器的名称必须匹配父项中的名称在子组件控制器中：@Output('emittername') emitter 在父模板中：(emittername)="handler($event)"。无提示编译错误可能是戏剧性的。

Answer 3

在我的特定情况下，我遇到了这个问题，没有警告或消息。

我的误解如下：

<app-child [someObject]="currentObject" (emitEventFunction)="saveChange($event)">

在模板标签中，我放置了发出事件的函数的名称emitEventFunction()，而不是放置了我用@Output()装饰器声明的对象。这意味着，当我尝试在子组件中调用emitEventFunction()函数时调用函数saveChange()时，Angular实际上正在寻找一个名为emitEventFunction的对象。

自然，解决方案是找到我声明为输出的内容：

@Output() entryChange = new EventEmitter<any>();

并改用它：

<app-child [someObject]="currentObject" (entryChange )="saveChange($event)">

角4事件发射器不发射

3 个答案: