typescript - Angular: Event dan error "subscribe is not a function"

Saya baru saja mulai mempelajari beberapa dasar Angular 4 dan terjebak saat mendengarkan sebuah event yang dipancarkan. Berikut adalah contoh yang cukup minimal yang mereproduksi masalah tersebut (setidaknya di sisi saya):

DateSenderComponent sedang "menyiarkan" tanggal saat ini yang kemudian akan diproses oleh AppComponent induknya (lihat di bawah):

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 seharusnya mendengarkan acara tanggal yang disiarkan:

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

Dari berbagai tutorial untuk pemula, saya menyimpulkan bahwa ini adalah cara untuk mendengarkan event. Namun, alih-alih mencetak nilai tanggal yang diterima, saat memuat halaman saya mendapatkan kesalahan berikut:

AppComponent.html:1 ERROR TypeError: instance[output.propName].subscribe bukan fungsi

di createDirectiveInstance (core.es5.js:10727)

di createViewNodes (core.es5.js:12086)

pada callViewAction (core.es5.js:12530)

pada execComponentViewsAction (core.es5.js:12439)

di createViewNodes (core.es5.js:12113)

di createRootView (core.es5.js:11991)

pada callWithDebugContext (core.es5.js:13206)

di Object.debugCreateRootView [sebagai createRootView] (core.es5.js:12666)

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

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

Sayangnya, saya tidak dapat menemukan informasi tentang apa arti sebenarnya dari ini dan saya juga tidak bisa mengetahuinya sendiri.

Satu hal yang tampaknya menjadi petunjuk: Ketika saya mengubah template AppComponent untuk mendengarkan beberapa event yang tidak dipicu di mana pun (misalnya <app-date-sender (someStringSent)="dateReceived($event)"></app-date-sender>) maka error tersebut menghilang. Jadi tampaknya ada hubungan antara event output yang sebenarnya dan template yang mendengarkannya, dan ini tampaknya menjadi penyebab masalahnya.

Apakah ada yang bisa menunjuk arah yang benar kepada saya?

Jawaban #1

EventEmitter seharusnya berasal dari '@angular/core'

Saya melihat dalam kode Anda itu berasal dari 'events'.

Apakah kamu yakin itu adalah objek yang benar yang sedang kamu gunakan?

Jawaban #2

Masalahnya ada di sini:

import { EventEmitter } from "events";

Anda harus mengimpor EventEmitter dari @angular/core seperti ini:

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

Artikel terkait