输出事件发射器在 Angular 5 中抛出错误

Question

我有一个奇怪的问题，我在 Angular 5.2.11 中有一个项目，其中包含 parent 和 child 组件。一切正常，直到我在 child 组件中添加了一个 @Output 装饰器以发出对 parent 组件的响应。这是 child TS:

questionCorrectAnswer:number;

nextQuestion(){
   this.nextQuestionEvent.emit({});
}

这是child的HTML

<a (click)="nextQuestion()" class="btn btn-primary">Go to next question</a>

在 parent 的 HTML 我有这个：

<app-question-displayer (nextQuestionEvent)="nextQuestion($event)"></app-question-displayer>

最后 parent 的 TS 文件如下：

setQuestion(idx:number){
   this.currentQuestion=this.exam.questions[idx];
   this.questionDisplay.setupQuestion(this.currentQuestion);
}

nextQuestion(event){
   this.currentQuestionIndex++;
   this.setQuestion(  this.currentQuestionIndex);
}

页面一加载，它就会将我重定向到主页，在 Chrome 的控制台中我看到了这个错误：

如您所见，这不是一个描述性很强的错误，因为我用谷歌搜索了它，但发现了其他与我的错误没有太大关系的错误。

奇怪的是，如果我删除 app-question-displayer 标签中的事件侦听器 (nextQuestionEvent)="nextQuestion($event)"，应用程序不会崩溃。

你觉得可以是什么？？

提前致谢！

编辑：

这是输出定义：

  @Output() nextQuestionEvent:EventEmitter<any>;

Answer 1

您还没有实例化您的 EventEmitter。

使用以下代码执行此操作：

@Output() nextQuestionEvent:EventEmitter<any> = new EventEmitter();

输出事件发射器在 Angular 5 中抛出错误

output event emmiter throws an error in Angular 5

eventemitter

typescript

angular