typescript - Angular: Händelser och "subscribe är inte en funktion" fel

Jag har precis börjat dyka in i lite grundläggande Angular 4 och sitter fast med att lyssna på ett utsänt event. Här är ett ganska minimalt exempel som reproducerar problemet (åtminstone på min sida):

DateSenderComponent "utsänder" det aktuella datumet som sedan ska bearbetas av dess förälder AppComponent (se nedan):

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 ska lyssna på det sända datumhändelsen:

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

Från olika nybörjarguider förstod jag att detta är sättet att lyssna på händelser. Men istället för att skriva ut det mottagna datumvärdet får jag följande fel när sidan laddas:

AppComponent.html:1 FEL TypeError: instance[output.propName].subscribe är inte en funktion

vid createDirectiveInstance (core.es5.js:10727)

vid createViewNodes (core.es5.js:12086)

vid callViewAction (core.es5.js:12530)

vid execComponentViewsAction (core.es5.js:12439)

vid createViewNodes (core.es5.js:12113)

vid createRootView (core.es5.js:11991)

vid callWithDebugContext (core.es5.js:13206)

vid Object.debugCreateRootView [som createRootView] (core.es5.js:12666)

på ComponentFactory_.create (core.es5.js:9912)

på ComponentFactoryBoundToModule.create (core.es5.js:3448)

Tyvärr kunde jag inte hitta någon information om vad detta egentligen betyder och jag kunde inte heller lista ut det på egen hand.

En sak som verkar vara en ledtråd: När jag ändrar AppComponent-mallen för att lyssna på en händelse som inte sänds någonstans (till exempel <app-date-sender (someStringSent)="dateReceived($event)"></app-date-sender>) så försvinner felet. Så det verkar finnas en koppling mellan den faktiska utgångshändelsen och mallen som lyssnar på den, och det verkar vara orsaken till problemet.

Kan någon visa mig åt rätt håll?

Svar #1

EventEmitter ska komma från '@angular/core'

Jag ser i din kod att det kommer från 'events'.

Är du säker på att det är rätt föremål som du använder?

Svar #2

Problemet är här:

import { EventEmitter } from "events";

Du måste importera EventEmitter från @angular/core på detta sätt:

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

Relaterade artiklar