166

我正在为经理开发一个角度应用程序来跟踪他们的团队，但我遇到了@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);
  }
}
4

8 回答 8

598

To make your code work in a stackblitz, I had to replace

import { EventEmitter } from 'events';

with

import { EventEmitter } from '@angular/core';
于 2018-12-05T21:32:59.610 回答
37

有同样的错误，

导入是正确的

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

但是变量定义是错误的：

@Output() onFormChange: EventEmitter<any>;

应该：

@Output() onFormChange: EventEmitter<any> = new EventEmitter();
于 2019-11-11T18:10:35.320 回答
3

In your component just use core angular module. Simply put this code at beginning of file.

import { EventEmitter } from '@angular/core';
于 2019-08-09T13:33:21.467 回答
3

即使从@angular/core.

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

于 2019-11-11T16:15:35.617 回答
3

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

于 2020-05-31T14:33:06.330 回答
2

对我来说，如果我在下面更改 import { EventEmitter } from 'events'; 就可以了。

至

import { Component, Output ,EventEmitter} from '@angular/core';
于 2019-12-05T03:36:05.397 回答
2

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

因此，请确保导入是否正常。

于 2021-06-29T08:55:59.803 回答
1

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

于 2020-07-28T07:55:07.163 回答