[英]An error occurred: @Output not initialized
I'm working on an angular app for managers to keep track of their teams, and I'm stuck with an @Output error:我正在为经理开发一个有角度的应用程序来跟踪他们的团队,但我遇到了 @Output 错误:
An error occurred: @Output deleteMeeting not initialized in 'MeetingItemComponent'.
I have a Meetings component, generating a list of MeetingItem components.我有一个 Meetings 组件,生成一个 MeetingItem 组件列表。 I want to perform actions when the user clicks on different buttons (edit, delete, show details).
我想在用户单击不同按钮(编辑、删除、显示详细信息)时执行操作。
Here is my parent Meetings template:这是我的家长会议模板:
<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>
My MeetingItem template (only the part concerned by this post):我的 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>
My MeetingItem component:我的 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);
}
}
To make your code work in a stackblitz , I had to replace为了让你的代码在stackblitz中工作,我不得不更换
import { EventEmitter } from 'events';
with和
import { EventEmitter } from '@angular/core';
Had the same error,有同样的错误,
Import was correct like导入是正确的
import { EventEmitter } from '@angular/core';
But the variable definition was wrong:但是变量定义错误:
@Output() onFormChange: EventEmitter<any>;
Should be:应该:
@Output() onFormChange: EventEmitter<any> = new EventEmitter();
I had the same problem even importing from @angular/core
.即使从
@angular/core
导入,我也遇到了同样的问题。
The problem : I was initializing the EventEmmitter
object in the ngOnInit
method from my component class.问题:我在组件类的
ngOnInit
方法中初始化EventEmmitter
对象。 Solution : I moved the initialization to the component's class constructor.解决方案:我将初始化移到了组件的类构造函数中。
I had also the same error.我也有同样的错误。 I found that Auto Import extension of VS Code did this.
我发现 VS Code 的自动导入扩展可以做到这一点。
import * as EventEmitter from 'events';
is imported instead of import { EventEmitter } from '@angular/core';
被导入而不是
import { EventEmitter } from '@angular/core';
So make sure if the import is ok or not.因此,请确保导入是否正常。
In your component just use core angular module.在您的组件中,只需使用核心角度模块。 Simply put this code at beginning of file.
只需将此代码放在文件开头即可。
import { EventEmitter } from '@angular/core';
change the import: import { EventEmitter } from 'events';
更改导入:
import { EventEmitter } from 'events';
with: import { EventEmitter } from '@angular/core';
与:
import { EventEmitter } from '@angular/core';
For me it works if I change below imports import { EventEmitter } from 'events';对我来说,如果我在下面进行更改,它会起作用
to到
import { Component, Output ,EventEmitter} from '@angular/core';
@Output() isAbout: EventEmitter<boolean> = new EventEmitter();
This should be the whole syntax to make it work you need the instance of the event emitter这应该是使它工作的整个语法你需要事件发射器的实例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.