发生错误：@Output 未初始化答案

【问题标题】：An error occurred: @Output not initialized发生错误：@Output 未初始化
【发布时间】：2019-05-07 11:36:39
【问题描述】：

我正在为经理开发一个 Angular 应用程序来跟踪他们的团队，但我遇到了 @Output 错误：

An error occurred: @Output deleteMeeting not initialized in 'MeetingItemComponent'.

我有一个会议组件，生成一个会议项目组件列表。我想在用户点击不同按钮时执行操作（编辑、删除、显示详细信息）。

这是我的家长会议模板：

<div class="meeting__list" [@newMeeting]="meetings.length">
  <app-meeting-item
    *ngFor="let meeting of meetings"
    [meeting]="meeting"
    (deleteMeeting)="deleteMeeting($event)"
    (openMeetingDialog)="openMeetingDialog($event)"
    (messageClick)="openMessage($event)"
  ></app-meeting-item>
</div>

我的 MeetingItem 模板（仅本帖涉及的部分）：

<span class="meeting__actions">
    <mat-icon *ngIf="meeting.message" (click)="onMessageClick(meeting)" matTooltip="Read the message"
      matTooltipPosition="above" class="icon--notes">notes</mat-icon>
    <mat-icon (click)="onOpenMeetingDialog(meeting)" matTooltip="Edit this meeting" matTooltipPosition="above" class="icon--edit">edit</mat-icon>
    <mat-icon (click)="onDeleteMeeting(meeting.id)" matTooltip="Delete this meeting" matTooltipPosition="above" class="icon--delete">delete_outline</mat-icon>
  </span>

我的 MeetingItem 组件：

import { Component, Input, Output } from '@angular/core';
import { EventEmitter } from 'events';

@Component({
  selector: 'app-meeting-item',
  templateUrl: './meeting-item.component.html',
  styleUrls: ['./meeting-item.component.scss']
})
export class MeetingItemComponent {

  @Input() meeting;

  @Output() deleteMeeting = new EventEmitter();
  @Output() openMeetingDialog = new EventEmitter();
  @Output() messageClick = new EventEmitter();

  constructor() {}

  onDeleteMeeting(meetingId) {
    this.deleteMeeting.emit(meetingId);
  }

  onOpenMeetingDialog(meeting) {
    this.openMeetingDialog.emit(meeting);
  }

  onMessageClick(meeting) {
    this.messageClick.emit(meeting);
  }
}

【问题讨论】：

提供的代码看起来不错，如果您可以提供 stackblitz 演示，将更容易跟踪问题。

标签： angular click angular-event-emitter

【解决方案1】：

我也有同样的错误。我发现 VS Code 的 Auto Import 扩展就是这样做的。导入import * as EventEmitter from 'events'; 而不是import { EventEmitter } from '@angular/core';

所以请确认导入是否正常。

【讨论】：

【解决方案2】：

@Output() isAbout: EventEmitter<boolean> = new EventEmitter();这应该是使它工作的整个语法，你需要事件发射器的实例

【讨论】：

【解决方案3】：

更改导入：import { EventEmitter } from 'events'; 与：import { EventEmitter } from '@angular/core';

【讨论】：

添加一些错误说明以及您的解决方案的工作原理。

【解决方案4】：

即使从@angular/core 导入，我也遇到了同样的问题。

问题：我在组件类的ngOnInit 方法中初始化EventEmmitter 对象。 解决方案：我将初始化移到了组件的类构造函数中。

【讨论】：

【解决方案5】：

对我来说，如果我更改以下导入，它会起作用从“事件”导入 { EventEmitter }；

到

import { Component, Output ,EventEmitter} from '@angular/core';

【讨论】：

【解决方案6】：

同样的错误，

导入是正确的，比如

import { EventEmitter } from '@angular/core';

但是变量定义错误：

@Output() onFormChange: EventEmitter<any>;

应该是：

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

【讨论】：

是的。当 EventEmitter 未使用组件初始化时，也会发生相同的错误。我尝试在一个函数中初始化它（以减少初始视图负载），但 Angular 没有它。

【解决方案7】：

在您的组件中，只需使用核心角度模块。只需将此代码放在文件开头即可。

import { EventEmitter } from '@angular/core';

【讨论】：

您的回答似乎是 ConnorsFan 回答的一部分。我认为你应该删除它

【解决方案8】：

为了让你的代码在 stackblitz 中工作，我不得不替换

import { EventEmitter } from 'events';

与

import { EventEmitter } from '@angular/core';

【讨论】：

由于从导入events 而不是@angular/core 的VS 代码自动导入而来到这里的人们默哀。
节省了我的时间！！