エラーが発生しました:@Outputが初期化されていません


101

私はマネージャーがチームを追跡するためのAngularアプリに取り組んでいますが、@ 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);
  }
}

1
提供されたコードは問題なく見え、stackblitzデモを提供できれば、問題を追跡しやすくなります。
Sunil Singh

回答:


383

あなたのコードをstackblitzで機能させるために、私は置き換える必要がありました

import { EventEmitter } from 'events';

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

5
同じ問題が発生しました。答えを見つけてよかったです。私のEventEmitterにジェネリック型がないのはなぜだろうとすでに思っていました;
MoxxiManagarm19年

私のためにも働いた、私は同じ問題を抱えていた。
ウラジミールデスポトビッチ

3
私は1時間過ごした後、これを見ました。イライラする。答えてくれてありがとう:)
PankajParkar19年

11
events代わりにインポートされたVSコードからの自動インポートのためにここにいる人々のための黙祷の瞬間@angular/core
PrameshBajracharya19年

1
@ArthurSiqueira痛みを感じる:D。
PrameshBajracharya19年

20

同じエラーがありました、

インポートは次のように正しかった

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

しかし、変数の定義は間違っていました。

@Output() onFormChange: EventEmitter<any>;

する必要があります:

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

はい。EventEmitterがコンポーネントで初期化されていない場合も、同じエラーが発生します。(初期ビューの負荷を減らすために)関数内で初期化しようとしましたが、Angularにはありません。
ジャイ

3

からインポートしても同じ問題が発生しました @angular/core

問題:コンポーネントクラスのメソッドでEventEmmitterオブジェクトを初期化していたngOnInit解決策:初期化をコンポーネントのクラスコンストラクターに移動しました。


2

コンポーネントでは、コア角度モジュールを使用するだけです。このコードをファイルの先頭に置くだけです。

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

8
あなたの答えは、ConnorsFanの答えの一部のコピーのようです。私はあなたがそれを削除するべきだと思います
ファブリツィオ

1

私にとっては、以下を変更すると機能しますimports import {EventEmitter} from'events ';

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

0

インポートを変更します:import { EventEmitter } from 'events'; with:import { EventEmitter } from '@angular/core';


何が悪かったのか、ソリューションがどのように機能するのかについての説明を追加します。
Abhishek

0

@Output() isAbout: EventEmitter<boolean> = new EventEmitter(); これは、イベントエミッターのインスタンスが必要な場合に機能させるための構文全体である必要があります

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.