Đã xảy ra lỗi: @Output không được khởi tạo

Tôi đang làm việc trên một ứng dụng góc cạnh để người quản lý theo dõi nhóm của họ và tôi đang gặp lỗi @Output:

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

Tôi có thành phần Cuộc họp, tạo danh sách các thành phần Mục họp. Tôi muốn thực hiện các hành động khi người dùng nhấp vào các nút khác nhau (chỉnh sửa, xóa, hiển thị chi tiết).

Đây là mẫu Cuộc họp dành cho phụ huynh của tôi:

<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>

Mẫu MeetingItem của tôi (chỉ phần có liên quan trong bài đăng này):

<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>

Thành phần MeetingItem của tôi:

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

Để làm cho mã của bạn hoạt động trong stackblitz , tôi đã phải thay thế

import { EventEmitter } from 'events';

với

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

Có cùng một lỗi,

Nhập đúng như thế

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

Nhưng định nghĩa biến đã sai:

@Output() onFormChange: EventEmitter<any>;

Nên là:

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

Tôi đã gặp vấn đề tương tự ngay cả khi nhập từ @angular/core.

Vấn đề : Tôi đang khởi tạo EventEmmitterđối tượng trong ngOnInitphương thức từ lớp thành phần của mình. Giải pháp : Tôi đã chuyển phần khởi tạo sang hàm tạo lớp của thành phần.

Trong thành phần của bạn chỉ cần sử dụng mô-đun góc cạnh lõi. Đơn giản chỉ cần đặt mã này ở đầu tệp.

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

Đối với tôi, nó hoạt động nếu tôi thay đổi bên dưới nhập import {EventEmitter} từ 'sự kiện';

đến

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

thay đổi nhập: import { EventEmitter } from 'events'; với:import { EventEmitter } from '@angular/core';

@Output() isAbout: EventEmitter<boolean> = new EventEmitter(); Đây phải là toàn bộ cú pháp để làm cho nó hoạt động, bạn cần phiên bản của trình phát sự kiện