發生錯誤：@Output 未初始化

Question

我正在為經理開發一個有角度的應用程序來跟蹤他們的團隊，但我遇到了 @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>

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

Answer 1

為了讓你的代碼在stackblitz中工作，我不得不更換

import { EventEmitter } from 'events';

和

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

Answer 2

有同樣的錯誤，

導入是正確的

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

但是變量定義錯誤：

@Output() onFormChange: EventEmitter<any>;

應該：

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

Answer 3

即使從@angular/core導入，我也遇到了同樣的問題。

問題：我在組件類的ngOnInit方法中初始化EventEmmitter對象。 解決方案：我將初始化移到了組件的類構造函數中。

Answer 4

我也有同樣的錯誤。 我發現 VS Code 的自動導入擴展可以做到這一點。 import * as EventEmitter from 'events'; 被導入而不是import { EventEmitter } from '@angular/core';

因此，請確保導入是否正常。

Answer 5

在您的組件中，只需使用核心角度模塊。 只需將此代碼放在文件開頭即可。

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

Answer 6

更改導入： import { EventEmitter } from 'events'; 與： import { EventEmitter } from '@angular/core';

Answer 7

對我來說，如果我在下面進行更改，它會起作用

到

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

Answer 8

@Output() isAbout: EventEmitter<boolean> = new EventEmitter(); 這應該是使它工作的整個語法你需要事件發射器的實例