Angular:事件和"订阅不是函数"错误

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)

at createRootView(core.es5.js:11991)

at 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";