Terjadi kesalahan: @Output tidak diinisialisasi

113

Saya sedang mengerjakan aplikasi sudut bagi manajer untuk melacak tim mereka, dan saya terjebak dengan kesalahan @Output:

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

Saya memiliki komponen Rapat, menghasilkan daftar komponen MeetingItem. Saya ingin melakukan tindakan ketika pengguna mengklik tombol yang berbeda (edit, hapus, tampilkan detail).

Berikut adalah template Rapat orang tua saya:

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

Template MeetingItem saya (hanya bagian yang bersangkutan dengan posting ini):

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

Komponen MeetingItem saya:

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);
  }
}
Apollo
sumber
1
Kode yang diberikan terlihat bagus dan akan lebih mudah untuk melacak masalah jika Anda dapat memberikan demo stackblitz.
Sunil Singh

Jawaban:

421

Untuk membuat kode Anda berfungsi di stackblitz , saya harus mengganti

import { EventEmitter } from 'events';

dengan

import { EventEmitter } from '@angular/core';
ConnorsFan
sumber
5
Baru saja mengalami masalah yang sama, saya senang saya menemukan jawabannya! Saya sudah bertanya-tanya mengapa EventEmitter saya tidak memiliki tipe generik ;-)
MoxxiManagarm
Bekerja untuk saya juga, saya memiliki masalah yang sama.
Vladimir Despotovic
4
Saya menghabiskan satu jam, dan kemudian melihat ini. Membuat frustrasi. Terima kasih atas jawabannya :)
Pankaj Parkar
14
Keheningan sejenak bagi mereka yang berada di sini karena impor otomatis dari kode VS yang diimpor eventssebagai gantinya @angular/core.
Pramesh Bajracharya
1
@ArthurSiqueira Saya merasakan sakitnya: D.
Pramesh Bajracharya
22

Punya kesalahan yang sama,

Impor benar seperti

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

Tetapi definisi variabel salah:

@Output() onFormChange: EventEmitter<any>;

Seharusnya:

@Output() onFormChange: EventEmitter<any> = new EventEmitter();
Петро Дарій
sumber
Iya. Kesalahan yang sama terjadi ketika EventEmitter tidak dijalankan dengan komponen. Saya mencoba menginisialisasi dalam sebuah fungsi (untuk mengurangi beban tampilan awal), tetapi Angular tidak memilikinya.
Jai
3

Saya memiliki masalah yang sama bahkan saat mengimpor @angular/core.

Masalahnya : Saya menginisialisasi EventEmmitterobjek dalam ngOnInitmetode dari kelas komponen saya. Solusi : Saya memindahkan inisialisasi ke konstruktor kelas komponen.

Leonardo Soares e Silva
sumber
2

Dalam komponen Anda, cukup gunakan modul sudut inti. Sederhananya kode ini di awal file.

import { EventEmitter } from '@angular/core'; 
Sanket Gadade
sumber
9
Jawaban Anda tampaknya merupakan salinan dari sebagian jawaban ConnorsFan. Saya pikir Anda harus menghapusnya
Fabrizio
1

Bagi saya itu berhasil jika saya mengubah impor impor {EventEmitter} dari 'peristiwa';

untuk

import { Component, Output ,EventEmitter} from '@angular/core';
vaibhav.patil
sumber
1

ubah impor: import { EventEmitter } from 'events'; dengan:import { EventEmitter } from '@angular/core';

RidhaHleli
sumber
tambahkan beberapa penjelasan tentang apa yang salah dan bagaimana solusi Anda bekerja.
Ak47
1

@Output() isAbout: EventEmitter<boolean> = new EventEmitter(); Ini harus menjadi keseluruhan sintaks untuk membuatnya bekerja, Anda memerlukan instance dari event emitter

sai pavan
sumber