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

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

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

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.


2

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

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

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

1

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


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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.