私はマネージャーがチームを追跡するための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);
}
}
stackblitz でコードを機能させるには、
import { EventEmitter } from 'events';
と
import { EventEmitter } from '@angular/core';
コンポーネントでは、コアangularモジュールを使用します。このコードをファイルの先頭に置くだけです。
import { EventEmitter } from '@angular/core';