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);
}
}
angular
click
angular-event-emitter
Apollo
sumber
sumber
Jawaban:
Untuk membuat kode Anda berfungsi di stackblitz , saya harus mengganti
dengan
sumber
events
sebagai gantinya@angular/core
.Punya kesalahan yang sama,
Impor benar seperti
Tetapi definisi variabel salah:
Seharusnya:
sumber
Saya memiliki masalah yang sama bahkan saat mengimpor
@angular/core
.Masalahnya : Saya menginisialisasi
EventEmmitter
objek dalamngOnInit
metode dari kelas komponen saya. Solusi : Saya memindahkan inisialisasi ke konstruktor kelas komponen.sumber
Dalam komponen Anda, cukup gunakan modul sudut inti. Sederhananya kode ini di awal file.
sumber
Bagi saya itu berhasil jika saya mengubah impor impor {EventEmitter} dari 'peristiwa';
untuk
sumber
ubah impor:
import { EventEmitter } from 'events';
dengan:import { EventEmitter } from '@angular/core';
sumber
@Output() isAbout: EventEmitter<boolean> = new EventEmitter();
Ini harus menjadi keseluruhan sintaks untuk membuatnya bekerja, Anda memerlukan instance dari event emittersumber