Question

大家好，感谢您阅读本文。

我刚刚开始潜入一些基本的Angular 4，并且我很难听到发出的事件。这是一个非常简单的例子，可以重现问题（至少在我的最后）：

DateSenderComponent正在“广播”当前日期，然后由其父AppComponent处理（见下文）：

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

@Component({
  selector: 'app-date-sender',
  template: '<button (click)="sendDate()">Send</button>'
})

export class DateSenderComponent {
  @Output() dateSent = new EventEmitter();

  sendDate(){
    var dt = new Date();
    console.log(dt);
    this.dateSent.emit(dt.toString());
  }
}

AppComponent应该收听广播的日期事件：

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

@Component({
  selector: 'app-root',
  template: '<app-date-sender (dateSent)="dateReceived($event)"></app-date-sender>'
})

export class AppComponent {
  dateReceived(value){
    console.log('Result: ', value);
  }
}

从各种初学者教程中我发现这是听取事件的方式。但是，不是打印出收到的日期值，而是在加载页面时出现以下错误：

AppComponent.html：1 ERROR TypeError：instance [output.propName] .subscribe不是函数

在createDirectiveInstance（core.es5.js：10727）

在createViewNodes（core.es5.js：12086）

在callViewAction（core.es5.js：12530）

在execComponentViewsAction（core.es5.js：12439）

在createViewNodes（core.es5.js：12113）

在createRootView（core.es5.js：11991）

在callWithDebugContext（core.es5.js：13206）

at Object.debugCreateRootView [as createRootView]（core.es5.js：12666）

在ComponentFactory_.create（core.es5.js：9912）

在ComponentFactoryBoundToModule.create（core.es5.js：3448）

不幸的是，我无法找到任何有关这实际意义的信息，而且我也无法自己解决这个问题。

有一件事似乎是提示：当我更改AppComponent模板以侦听某些未在任何地方发出的事件时（例如<app-date-sender (someStringSent)="dateReceived($event)"></app-date-sender>），则错误消失。因此，实际输出事件和听取它的模板之间似乎存在联系，这似乎是导致问题的原因。

有人能指出我正确的方向吗？非常感谢。

Answer 1

我相信EventEmitter应来自'@angular/core'？

我在您的代码中看到它来自'events'。

您确定它是您正在使用的正确对象吗？

Answer 2

问题在于：

import { EventEmitter } from "events";

您必须从EventEmitter导入@angular/core，如下所示：

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

Angular：事件和“订阅不是函数”错误

2 个答案: