เกิดข้อผิดพลาด: @Output ไม่ได้เตรียมใช้งาน

ฉันกำลังทำงานกับแอพเชิงมุมสำหรับผู้จัดการเพื่อติดตามทีมของพวกเขาและฉันติดอยู่กับข้อผิดพลาด @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);
  }
}

เพื่อให้รหัสของคุณทำงานในstackblitzฉันต้องแทนที่

import { EventEmitter } from 'events';

ด้วย

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

มีข้อผิดพลาดเดียวกัน

การนำเข้าถูกต้องเช่น

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

แต่นิยามตัวแปรผิด:

@Output() onFormChange: EventEmitter<any>;

ควรจะเป็น:

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

ฉันมีปัญหาเดียวกันแม้กระทั่งการนำเข้าจาก@angular/core.

ปัญหา : ฉันกำลังเริ่มต้นEventEmmitterอ็อบเจ็กต์ในngOnInitเมธอดจากคลาสคอมโพเนนต์ของฉัน วิธีแก้ไข : ฉันย้ายการเริ่มต้นไปยังตัวสร้างคลาสของคอมโพเนนต์

ในส่วนประกอบของคุณเพียงแค่ใช้โมดูลเชิงมุมหลัก เพียงใส่รหัสนี้ที่จุดเริ่มต้นของไฟล์

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

สำหรับฉันมันใช้งานได้ถ้าฉันเปลี่ยนด้านล่างนำเข้า import {EventEmitter} จาก 'events'

ถึง

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

เปลี่ยนการนำเข้า: import { EventEmitter } from 'events'; ด้วย:import { EventEmitter } from '@angular/core';

@Output() isAbout: EventEmitter<boolean> = new EventEmitter(); นี่ควรเป็นไวยากรณ์ทั้งหมดเพื่อให้ใช้งานได้คุณต้องมีอินสแตนซ์ของตัวปล่อยเหตุการณ์