Question

我正在为经理开发一个角度应用程序，以跟踪他们的团队，而我遇到了@Output错误：

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

我有一个Meetings组件，生成一个MeetingItem组件列表。当用户单击其他按钮（编辑，删除，显示详细信息）时，我想执行操作。

这是我的父级Meetings模板：

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

我的MeetingItem组件：

._16c8fd5e ._1f1541e1

Answer 1

要使您的代码在stackblitz中工作，我必须替换

import { EventEmitter } from 'events';

使用

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

Answer 2

在您的组件中只需使用核心角度模块。只需将这段代码放在文件开头即可。

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

Answer 3

即使从@ angular / core导入，我也遇到相同的问题。

问题：我正在从组件类的ngOninit方法中初始化EventEmmiter对象。 解决方案：我将初始化移至组件的类构造函数。

Answer 4

有相同的错误

像

一样正确导入

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

但是变量定义错误：

@Output() onFormChange: EventEmitter<any>;

应该是：

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

Answer 5

更改导入：import { EventEmitter } from 'events'; 与：import { EventEmitter } from '@angular/core';

Answer 6

@Output() isAbout: EventEmitter<boolean> = new EventEmitter();这应该是使它起作用的整个语法，您需要事件发射器的实例

Answer 7

对我来说，如果我将其更改为低于进口的价格，它将起作用从“事件”中导入{EventEmitter}；

到

从'@ angular / core'导入{Component，Output，EventEmitter};

Answer 8

我也有同样的错误。我发现 VS Code 的 Auto Import 扩展做到了这一点。 import * as EventEmitter from 'events'; 被导入而不是 import { EventEmitter } from '@angular/core';

因此请确保导入是否正常。

发生错误：@Output未初始化

8 个答案: