typescript Angular：事件和“订阅不是函数”错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44311575/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular: Events and "subscribe is not a function" error
提问by Onkel Toob
I have just started diving into some basic Angular 4 and am stuck listening to an emitted event. Here's a pretty minimal example that reproduces the problem (at least on my end):
我刚刚开始深入研究一些基本的 Angular 4，并且一直在听一个发出的事件。这是一个重现问题的非常小的示例（至少在我这边）：
DateSenderComponentis "broadcasting" the current date which is then to be processed by its parent AppComponent(see below):
DateSenderComponent正在“广播”当前日期，然后由其父级处理AppComponent（见下文）：
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());
}
}
AppComponentis supposed to listen to the broadcasted date event:
AppComponent应该收听广播日期事件：
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);
}
}
From various beginners tutorials I figured this is the way to listen to events. However, instead of printing out the received date value, when loading the page I get the following error:
从各种初学者教程中，我认为这是侦听事件的方式。但是，在加载页面时，我没有打印出接收到的日期值，而是出现以下错误：
AppComponent.html:1 ERROR TypeError: instance[output.propName].subscribe is not a function
at createDirectiveInstance (core.es5.js:10727)
at createViewNodes (core.es5.js:12086)
at callViewAction (core.es5.js:12530)
at execComponentViewsAction (core.es5.js:12439)
at createViewNodes (core.es5.js:12113)
at createRootView (core.es5.js:11991)
at callWithDebugContext (core.es5.js:13206)
at Object.debugCreateRootView [as createRootView] (core.es5.js:12666)
at ComponentFactory_.create (core.es5.js:9912)
at ComponentFactoryBoundToModule.create (core.es5.js:3448)
AppComponent.html:1 ERROR TypeError: instance[output.propName].subscribe 不是函数
在 createDirectiveInstance (core.es5.js:10727)
在 createViewNodes (core.es5.js:12086)
在 callViewAction (core.es5.js:12530)
在 execComponentViewsAction (core.es5.js:12439)
在 createViewNodes (core.es5.js:12113)
在 createRootView (core.es5.js:11991)
在 callWithDebugContext (core.es5.js:13206)
在 Object.debugCreateRootView [as createRootView] (core.es5.js:12666)
在 ComponentFactory_.create (core.es5.js:9912)
在 ComponentFactoryBoundToModule.create (core.es5.js:3448)
Unfortunately, I wasn't able to find any information about what this actually means and I also couldn't figure it out on my own.
不幸的是，我无法找到有关这实际上意味着什么的任何信息，而且我自己也无法弄清楚。
One thing that seems to be a hint: When I change the AppComponenttemplate to listen to some event that doesn't get emitted anywhere (for example <app-date-sender (someStringSent)="dateReceived($event)"></app-date-sender>) then the error disappears. So there seems to be a connection between the actual output event and the template listening to it and it seems to be the cause of the problem.
一件事似乎是一个提示：当我更改AppComponent模板以侦听某些不会在任何地方发出的事件（例如<app-date-sender (someStringSent)="dateReceived($event)"></app-date-sender>）时，错误就会消失。因此，实际输出事件与监听它的模板之间似乎存在联系，这似乎是问题的原因。
Can anyone point me in the right direction?
任何人都可以指出我正确的方向吗？
回答by gpanagopoulos
EventEmittershould come from '@angular/core'
EventEmitter应该来自 '@angular/core'
I see in your code it comes from 'events'.
我在你的代码中看到它来自'events'.
Are you sure it is the correct object that you are using?
您确定它是您使用的正确对象吗？
回答by Carolina Faedo
The problem is here:
问题在这里：
import { EventEmitter } from "events";
You have to import EventEmitterfrom@angular/corelike this:
你必须导入EventEmitter从@angular/core这样的：
import { EventEmitter } from "@angular/core";
