Bir hata oluştu: @ Çıktı başlatılmadı


103

Yöneticilerin ekiplerini takip etmeleri için açısal bir uygulama üzerinde çalışıyorum ve bir @ Çıktı hatasıyla karşılaşıyorum:

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

MeetingItem bileşenlerinin bir listesini oluşturan bir Toplantılar bileşenim var. Kullanıcı farklı düğmelere tıkladığında işlem yapmak istiyorum (düzenle, sil, ayrıntıları göster).

İşte ebeveyn Toplantıları şablonum:

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

Toplantı Öğem şablonum (yalnızca bu gönderiyle ilgili bölüm):

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

Toplantım Öğesi bileşeni:

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
Sağlanan kod iyi görünüyor ve stackblitz demosu sağlayabilirseniz sorunu izlemek daha kolay olacaktır.
Sunil Singh

Yanıtlar:


385

Kodunuzun bir yığın halinde çalışmasını sağlamak için ,

import { EventEmitter } from 'events';

ile

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

5
Sadece aynı sorunu yaşadım, cevabı bulduğuma sevindim! EventEmitter'ımın neden genel bir türü olmadığını zaten merak etmiştim ;-)
MoxxiManagarm

Benim için de çalıştı, aynı problemi yaşadım.
Vladimir Despotovic

3
Bir saat geçirdim ve sonra bunu gördüm. Sinir bozucu. Cevap için teşekkürler :)
Pankaj Parkar

11
VS kodundan eventsyerine içe aktarılan bir otomatik içe aktarma nedeniyle burada bulunanlar için bir anlık sessizlik @angular/core.
Pramesh Bajracharya

1
@ArthurSiqueira Acıyı hissediyorum: D.
Pramesh Bajracharya

21

Aynı hatayı yaptım

İçe aktarma gibi doğruydu

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

Ancak değişken tanımı yanlıştı:

@Output() onFormChange: EventEmitter<any>;

Olmalı:

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

Evet. Aynı hata, EventEmiter bileşenle başlatılmadığında ortaya çıkar. Bir işlev içinde başlatmayı denedim (ilk görünüm yükünü azaltmak için), ancak Angular buna sahip olmayacak.
Jai

3

Den ithal ederken bile aynı sorunu yaşadım @angular/core.

Sorun : Yöntemdeki EventEmmitternesneyi ngOnInitbileşen sınıfımdan başlatıyordum. Çözüm : İlklendirmeyi bileşenin sınıf yapıcısına taşıdım.


2

Bileşeninizde sadece çekirdek açısal modülü kullanın. Bu kodu dosyanın başına koymanız yeterlidir.

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

8
Cevabınız, ConnorsFan'ın cevabının bir kısmının bir kopyası gibi görünüyor. Sanırım onu ​​silmelisin
Fabrizio

1

Benim için, "olaylar" dan içe aktarım {EventEmitter} 'i aşağıda değiştirirsem çalışır;

-e

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

0

içe aktarmayı değiştirin: import { EventEmitter } from 'events'; ile:import { EventEmitter } from '@angular/core';


neyin yanlış olduğuna ve çözümünüzün nasıl çalıştığına dair bazı açıklamalar ekleyin.
Abhishek

0

@Output() isAbout: EventEmitter<boolean> = new EventEmitter(); Bu, çalışmasını sağlamak için tüm sözdizimi olmalı, olay yayıcı örneğine ihtiyacınız var

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.