发生错误:@Output 未初始化

我正在开发一个有用的应用程序，帮助管理者跟踪他们的团队，但是我被一个@Output 错误困住了:

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

我有一个 Meetings 组件，它生成 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>

我的会议项目组成部分:

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);
}
}
68192 次浏览
小开
最佳答案

为了使您的代码在 Stackblitz中工作，我必须替换

import { EventEmitter } from 'events';

和

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

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

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

我甚至从 @angular/core进口也有同样的问题。

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

小开

犯了同样的错误,

导入是正确的

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

但变量定义是错误的:

@Output() onFormChange: EventEmitter<any>;

应该是:

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

对我来说，如果我改变低于导入的工作 从“事件”导入{ EventEmitter } ;

到

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

改变输入: import { EventEmitter } from 'events'; 附: import { EventEmitter } from '@angular/core';

小开

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

小开

我也犯了同样的错误。我发现 汽车进口扩展 VS 代码做到了这一点。导入 import * as EventEmitter from 'events';而不是 import { EventEmitter } from '@angular/core';

所以要确保导入是否正常。


提交答案