Angular: события и ошибка "подписаться не является функцией"

Я только начал погружаться в какой-то базовый 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 ОШИБКА TypeError: instance [output.propName].subscribe не является функцией

at createDirectiveInstance (core.es5.js: 10727)

в createViewNodes (core.es5.js: 12086)

на callViewAction (core.es5.js: 12530)

at execComponentViewsAction (core.es5.js: 12439)

в createViewNodes (core.es5.js: 12113)

в createRootView (core.es5.js: 11991)

at callWithDebugContext (core.es5.js: 13206)

at Object.debugCreateRootView [as createRootView] (core.es5.js:12666)

at ComponentFactory_.create(core.es5.js:9912)

at ComponentFactoryBoundToModule.create(core.es5.js:3448)

К сожалению, я не смог найти никакой информации о том, что это на самом деле означает, и я также не мог понять это самостоятельно.

Одна вещь, которая кажется намеком: когда я изменяю шаблон AppComponent для прослушивания какого-либо события, которое нигде не излучается (например, <app-date-sender (someStringSent)="dateReceived($event)"></app-date-sender>), тогда ошибка исчезает. Таким образом, кажется, существует связь между фактическим выходным событием и шаблоном, который его слушает, и это, похоже, является причиной проблемы.

Может кто-то указать мне верное направление?

Ответ 1

Я считаю, что EventEmitter должен исходить от '@angular/core'?

Я вижу в вашем коде, что он исходит от 'events'.

Вы уверены, что это правильный объект, который вы используете?

Ответ 2

Проблема здесь:

import { EventEmitter } from "events";

Вы должны импортировать EventEmitter из @angular/core следующим образом:

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