Angular 4 事件发射器未发射

Question

所以我有一个工作正常的事件发射器。在我的 child 中，我调用了一个函数：

(click)="EnterEditMode()

触发：

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

在我的parent中，我然后：

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

这完美无缺。但现在我想在它旁边添加第二个输出。所以在 child 中，我调用：

SaveChanges();

其中触发了一个函数：

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

当我调用它时，控制台日志被触发但发射没有被触发。我的 parent 有一个函数因此从未被调用。

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

我真的看不出我做错了什么，并尝试解决问题，但我没有收到任何错误，只有 "SaveChanges()" 已被调用的控制台日志。我是否遗漏了有关发射器的信息？

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

在我的 child 组件中：

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

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

Answer 1

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

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

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

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

Answer 2

在我的例子中，事件发射器的名称必须与父项中的名称相匹配在子组件控制器中：@Output('emittername') emitter 在父模板中：(emittername)="handler($event)"。静默编译错误可以是一出戏。

Answer 3

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

我的误解是这样的：

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

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

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

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

并改用它：

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

Answer 4

检查清单

检查是否满足以下所有条件（以下示例）：

EventEmitter 是一个 @Output.
emit 函数可以访问。
您正在调用模板中的函数。

例子

EventEmitter 是一个 @Input:

@Component({
  selector: `TempratureCalculator`
  // ...
})
export class TempratureCalculator {
  @Input() tempratureChange = new EventEmitter<float>();

  change(t: float) {
    this.tempratureChange.emit(t);
  }
}

@Component({
  // ...
  template: `<TempratureCalculator (tempratureChange)="change(t)"></TempratureCalculator>
`
})
export class AppComponent {
  change(t: float) {}
}

检查 emit 是否可达：

// before
this.tempratureChange.emit(/* ... */);

// after
debugger;
this.tempratureChange.emit(/* ... */);

这将在发出之前暂停并在浏览器中打开调试器。如果那没有发生，则 emit 呼叫无法接通。

传递函数而不是调用它：

<!-- Wrong, Doesn't work -->
<TempratureCalculator (tempratureChange)="change"></TempratureCalculator>

<!-- This works -->
<TempratureCalculator (tempratureChange)="change(t)"></TempratureCalculator>

这是一个社区维基答案，欢迎扩展答案

Angular 4 事件发射器未发射

Angular 4 Event Emitter not Emitting

angular

emitter

检查清单

例子