发生错误:@Output未初始化

Apo*_*llo 52 click angular angular-event-emitter

我正在开发一个角色应用程序供管理人员跟踪他们的团队,我遇到了@Output错误:

An error occurred: @Output deleteMeeting not initialized in 'MeetingItemComponent'.
Run Code Online (Sandbox Code Playgroud)

我有一个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>
Run Code Online (Sandbox Code Playgroud)

我的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>
Run Code Online (Sandbox Code Playgroud)

我的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);
  }
}
Run Code Online (Sandbox Code Playgroud)

Con*_*Fan 224

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

import { EventEmitter } from 'events';
Run Code Online (Sandbox Code Playgroud)

import { EventEmitter } from '@angular/core';
Run Code Online (Sandbox Code Playgroud)

  • 为那些在这里的人默哀片刻,因为 VS 代码的自动导入导入了“events”而不是“@angular/core”。 (65认同)
  • 刚遇到同样的问题,很高兴我找到了答案!我已经想知道为什么我的EventEmitter没有通用类型;-) (3认同)

Пет*_*рій 34

有同样的错误,

导入是正确的

import { EventEmitter } from '@angular/core';
Run Code Online (Sandbox Code Playgroud)

但是变量定义是错误的:

@Output() onFormChange: EventEmitter<any>;
Run Code Online (Sandbox Code Playgroud)

应该:

@Output() onFormChange: EventEmitter<any> = new EventEmitter();
Run Code Online (Sandbox Code Playgroud)


小智 5

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

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


mdm*_*afa 5

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

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