tutorial - Angular: Eventos y error "suscribirse no es una función"

install angular 2

Question

Hola a todos y gracias por leer esto.

Acabo de empezar a bucear en algunos Angular 4 básicos y estoy atascado escuchando un evento emitido. Aquí hay un ejemplo bastante mínimo que reproduce el problema (al menos en mi extremo):

DateSenderComponent está "transmitiendo" la fecha actual que luego será procesada por su AppComponent principal (ver más abajo):

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

Se supone que AppComponent escucha el evento de fecha de transmisión:

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

De varios tutoriales para principiantes, pensé que esta es la manera de escuchar eventos. Sin embargo, en lugar de imprimir el valor de la fecha recibida, al cargar la página aparece el siguiente error:

AppComponent.html: 1 ERROR TypeError: instance [output.propName] .subscribe no es una función

en createDirectiveInstance (core.es5.js: 10727)

en createViewNodes (core.es5.js: 12086)

en callViewAction (core.es5.js: 12530)

en execComponentViewsAction (core.es5.js: 12439)

en createViewNodes (core.es5.js: 12113)

en createRootView (core.es5.js: 11991)

en callWithDebugContext (core.es5.js: 13206)

en Object.debugCreateRootView [como createRootView] (core.es5.js: 12666)

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

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

Desafortunadamente, no pude encontrar ninguna información sobre lo que esto significa en realidad y tampoco pude averiguarlo por mi cuenta.

Una cosa que parece ser una pista: cuando cambio la plantilla de AppComponent para escuchar algún evento que no se emita en ningún lugar (por ejemplo, <app-date-sender (someStringSent)="dateReceived($event)"></app-date-sender> ) entonces el error desaparece. Entonces, parece que hay una conexión entre el evento de salida real y la plantilla que lo escucha y parece ser la causa del problema.

¿Alguien puede señalarme en la dirección correcta? Muchas gracias por adelantado.

Answer 1

Creo que EventEmitter debería provenir de ''@angular/core'' ?

Veo en tu código que viene de ''events'' .

¿Estás seguro de que es el objeto correcto que estás usando?

Answer 2

El problema está aquí:

import { EventEmitter } from "events";

Tienes que importar EventEmitter desde @angular/core esta manera:

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