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


Hola a todos y gracias por leer esto.

Acabo de empezar a sumergirme en algunos 4 Angulares 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 es "broadcasting" la fecha actual que luego será procesada por su padre AppComponent (ver 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());
  }
}

AppComponent se supone que para escuchar el evento fecha transmitida:

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 me imaginé esto es la manera de escuchar los acontecimientos. Sin embargo, en lugar de imprimir el valor de la fecha recibida, al cargar la página obtengo el siguiente error:

AppComponent.html: 1 ERROR TypeError: instance [output.propName].suscribirse 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)

At callWithDebugContext (core.es5.js:13206)

En el objeto.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 realmente significa y tampoco pude averiguar por mi cuenta.

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

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

Author: Akkusativobjekt, 2017-06-01

2 answers

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

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

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

 115
Author: gpanagopoulos,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-11-30 08:47:38

El problema está aquí:

import { EventEmitter } from "events";

Tienes que importar EventEmitter desde @angular/core así:

import { EventEmitter } from "@angular/core";
 23
Author: Carolina Faedo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-14 21:48:07