4

所以我有一个事件发射器工作得很好。在我的孩子中，我调用了一个函数：

(click)="EnterEditMode()

触发：

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

在我的父母中，我然后：

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

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

SaveChanges();

触发一个功能：

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

当我调用它时，会触发控制台日志，但不会触发发射。我的父母有一个永远不会被调用的函数。

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

我真的看不出我做错了什么，并试图排除故障，但我没有收到任何错误，只是控制台日志显示“SaveChanges()”已被调用。我错过了关于发射器的一些东西吗？

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

在我的子组件中我：

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

再次， enterEdit 工作，但 saveChanges 没有......

4

3 回答 3

7

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

我的误解如下：

<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)">

于 2019-04-18T17:58:22.783 回答
4

所以这是由于对输出发射器在 Angular 中的工作方式存在根本性的误解。

错误的假设 简单地触发发射器会迫使我的控制器做出反应。

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

在我的 .html 文件中，我需要将 (saveChanges)='saveChanges($event)' 添加到我的自定义组件中。这行得通。

于 2017-12-09T17:29:17.860 回答
2

在我的情况下，只有事件发射器的名称必须与父级 In children component controller: @Output('emittername') emitter In parent template:中的名称匹配(emittername)="handler($event)"。静默编译错误可能是一场戏剧。

于 2018-04-02T20:50:35.920 回答