Angulaire: événements et erreur "s'abonner n'est pas une fonction"

Question

Salut tout le monde et merci pour la lecture de ce.

Je viens de commencer la plongée dans la base Angulaire 4 et je suis coincé à l'écoute d'un émises événement. Voici un joli exemple minimal qui reproduit le problème (du moins sur ma fin):

DateSenderComponent est la "radiodiffusion" la date du jour qui est ensuite traitée par son parent AppComponent (voir ci-dessous):

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 est censé écouter le diffusé date de l'événement:

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

À partir de divers tutoriels débutants j'ai pensé que c'est la façon d'écouter des évènements. Cependant, au lieu de l'impression de la date de réception de la valeur, lors du chargement de la page j'obtiens l'erreur suivante:

AppComponent.html:1 ERREUR TypeError: exemple[sortie.propName].abonnez-vous n'est pas une fonction

au createDirectiveInstance (de base.es5.js:10727)

au createViewNodes (de base.es5.js:12086)

au callViewAction (de base.es5.js:12530)

au execComponentViewsAction (de base.es5.js:12439)

au createViewNodes (de base.es5.js:12113)

au createRootView (de base.es5.js:11991)

au callWithDebugContext (de base.es5.js:13206)

à l'Objet.debugCreateRootView [comme createRootView] (niveau de base.es5.js:12666)

au ComponentFactory_.créer (de base.es5.js:9912)

au ComponentFactoryBoundToModule.créer (de base.es5.js:3448)

Malheureusement, je n'étais pas en mesure de trouver des informations sur ce que cela signifie réellement et je ne pouvais pas le découvrir sur mon propre.

Une chose qui semble être un indice: Quand je change l' AppComponent modèle pour écouter un événement qui n'est pas émise n'importe où (par exemple, <app-date-sender (someStringSent)="dateReceived($event)"></app-date-sender>) alors l'erreur disparaît. Il semble donc y avoir une connexion entre la sortie réelle de l'événement et le modèle de l'écouter et il semble être la cause du problème.

Quelqu'un peut me pointer dans la bonne direction? Merci beaucoup à l'avance.

Answer 1

Je crois que EventEmitter devrait venir de '@angular/core' ?

Je vois dans votre code que cela vient de 'events' .

Êtes-vous sûr que c'est le bon objet que vous utilisez?

Answer 2

Le problème est ici:

 import { EventEmitter } from "events";
 

Vous devez importer EventEmitter de @angular/core comme ceci:

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