오류가 발생했습니다. @Output이 초기화되지 않았습니다.

관리자가 팀을 추적 할 수 있도록 각도 앱을 개발 중이며 @Output 오류가 발생했습니다.

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

Meetings 구성 요소가 있으며 MeetingItem 구성 요소 목록을 생성합니다. 사용자가 다른 버튼 (편집, 삭제, 세부 정보 표시)을 클릭 할 때 작업을 수행하고 싶습니다.

다음은 부모님 회의 템플릿입니다.

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

내 MeetingItem 템플릿 (이 게시물과 관련된 부분 만 해당) :

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

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

A의 코드 작동하려면 stackblitz , 나는 대체했다

import { EventEmitter } from 'events';

와

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

같은 오류가 발생했습니다.

가져 오기가 정확했습니다.

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

그러나 변수 정의가 잘못되었습니다.

@Output() onFormChange: EventEmitter<any>;

해야한다:

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

에서 가져올 때도 동일한 문제가 발생했습니다 @angular/core.

문제 : 구성 요소 클래스 EventEmmitter의 ngOnInit메서드에서 개체를 초기화했습니다 . 솔루션 : 초기화를 구성 요소의 클래스 생성자로 옮겼습니다.

구성 요소에서 핵심 각도 모듈을 사용하십시오. 이 코드를 파일 시작 부분에 넣으십시오.

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

나를 위해 아래에서 변경하면 작동합니다 import {EventEmitter} from 'events';

...에

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

가져 오기를 변경하십시오 import { EventEmitter } from 'events'; .import { EventEmitter } from '@angular/core';

@Output() isAbout: EventEmitter<boolean> = new EventEmitter(); 이벤트 이미 터의 인스턴스가 필요하므로 작동하도록 전체 구문이어야합니다.