Ocurrió un error: @Output no inicializado


102

Estoy trabajando en una aplicación angular para que los gerentes realicen un seguimiento de sus equipos, y tengo un error de @Output:

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

Tengo un componente de reuniones, que genera una lista de componentes de MeetingItem. Quiero realizar acciones cuando el usuario hace clic en diferentes botones (editar, eliminar, mostrar detalles).

Aquí está mi plantilla de reuniones para padres:

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

Mi plantilla MeetingItem (solo la parte afectada por esta publicación):

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

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

1
El código proporcionado se ve bien y sería más fácil rastrear el problema si puede proporcionar una demostración de stackblitz.
Sunil Singh

Respuestas:


383

Para que su código funcione en un stackblitz , tuve que reemplazar

import { EventEmitter } from 'events';

con

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

5
Acabo de tener el mismo problema, ¡me alegra haber encontrado la respuesta! Ya me preguntaba por qué mi EventEmitter no tenía un tipo genérico ;-)
MoxxiManagarm

A mí también me funcionó, tuve el mismo problema.
Vladimir Despotovic

3
Pasé una hora y luego vi esto. Frustrante. Gracias por la respuesta :)
Pankaj Parkar

11
Un momento de silencio para aquellos que están aquí debido a una importación automática desde el código VS que importó en eventslugar de @angular/core.
Pramesh Bajracharya

1
@ArthurSiqueira Siento el dolor: D.
Pramesh Bajracharya

20

Tuve el mismo error

La importación fue correcta como

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

Pero la definición de la variable estaba mal:

@Output() onFormChange: EventEmitter<any>;

Debiera ser:

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

Si. El mismo error ocurre cuando EventEmitter no se inicializa con el componente. Intenté inicializarlo dentro de una función (para reducir la carga de vista inicial), pero Angular no lo tendrá.
Jai

3

Tuve el mismo problema incluso al importar de @angular/core.

El problema : estaba inicializando el EventEmmitterobjeto en el ngOnInitmétodo de mi clase de componente. Solución : moví la inicialización al constructor de clases del componente.


2

En su componente, solo use el módulo angular central. Simplemente coloque este código al principio del archivo.

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

8
Su respuesta parece una copia de parte de la respuesta de ConnorsFan. Creo que deberías eliminarlo
Fabrizio

1

Para mí, funciona si cambio a continuación las importaciones import {EventEmitter} de 'eventos';

a

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

0

cambiar la importación: import { EventEmitter } from 'events'; con:import { EventEmitter } from '@angular/core';


agregue alguna explicación de lo que estaba mal y cómo funciona su solución.
Abhishek

0

@Output() isAbout: EventEmitter<boolean> = new EventEmitter(); Esta debe ser la sintaxis completa para que funcione, necesita la instancia del emisor de eventos

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.