发生错误:@Output未初始化


101

我正在为经理开发一个角度应用程序,以跟踪他们的团队,并且遇到了@Output错误:

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

我有一个会议组件,生成一个MeetingItem组件列表。当用户单击不同的按钮(编辑,删除,显示详细信息)时,我想执行操作。

这是我的父级会议模板:

<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);
  }
}

1
如果可以提供stackblitz演示,则提供的代码看起来不错,并且更容易跟踪问题。
尼尔·辛格

Answers:


383

为了使你的代码工作在stackblitz,我不得不更换

import { EventEmitter } from 'events';

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

5
刚遇到同样的问题,很高兴我找到了答案!我已经想知道为什么我的EventEmitter没有通用类型;-)
MoxxiManagarm

也为我工作,我遇到了同样的问题。
弗拉基米尔·德斯波托维奇

3
我花了一个小时,然后看到了。令人沮丧 感谢您的回答:)
Pankaj Parkar

11
由于VS代码自动导入events而不是导入的VS代码,对那些在这里的人感到沉默@angular/core
Pramesh Bajracharya

1
@ArthurSiqueira我感到很痛苦:D。
Pramesh Bajracharya

20

发生了同样的错误,

导入是正确的像

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

但是变量定义是错误的:

@Output() onFormChange: EventEmitter<any>;

应该:

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

是。如果未使用组件初始化EventEmitter,则会发生相同的错误。我尝试在一个函数中初始化它(以减少初始视图负载),但是Angular却没有它。
Jai

3

即使从导入,我也遇到相同的问题@angular/core

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


2

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

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

8
您的答案似乎是ConnorsFan答案的一部分。我认为您应该删除它
Fabrizio

1

对我来说,如果我将下面的输入从'events'更改为import import {EventEmitter},它就可以工作;

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

0

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


添加一些关于什么地方出错以及您的解决方案如何工作的解释。
阿比舍克

0

@Output() isAbout: EventEmitter<boolean> = new EventEmitter(); 这应该是使它正常工作的全部语法,您需要事件发射器的实例

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.