TypeError: instance[output.propName].subscribe 不是函数答案

【问题标题】：TypeError: instance[output.propName].subscribe is not a functionTypeError: instance[output.propName].subscribe 不是函数
【发布时间】：2018-09-28 19:24:30
【问题描述】：

我正在尝试从子组件向父组件发出事件。

家长：

父.ts

onChangeUpload(event){
  console.log('event');
  console.log(event);
}

&lt;app-upload (uploadEmit)="onChangeUpload($event)"&gt;&lt;/app-upload&gt;

孩子：

@Output() uploadEmit: EventEmitter = new EventEmitter();

this.uploadEmit.emit('upload successful');

我得到了这个错误：

core.js:1448 ERROR Error: Uncaught (in promise): TypeError: instance[output.propName].subscribe is not a function

@angular/cli: 1.7.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.6.2
webpack: 3.11.0

【问题讨论】：

标签： angular eventemitter emit

【解决方案1】：

import { EventEmitter } from 'events';

这是您的导入声明吗？

如果是的话，改成

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

并禁用 VS Code 自动导入。 :)

【讨论】：

【解决方案2】：

我想你没有提到类型，当我们在事件发射时发送数据时，我们必须明确指定我们将发送的数据类型，例如：

子组件：

<h3> Child Component </h3>
<button (click)="onSendData()">Send Data</button>

儿童打字稿：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'hello',
  templateUrl: './hello.component.html',
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {
  @Input() name: string;
  @Output() passData = new EventEmitter<string>();

  onSendData(){
    this.passData.emit("Hello From Child");
  }
}

您可以查看一个工作示例here。

【讨论】：

什么是hello.component.html？
@ishandutta2007 它是特定组件的模板文件（HTML），在本例中为HelloComponent。

【解决方案3】：

当我想从孩子发射到父母时，我遇到了同样的问题。但是，由于 VS Code 的自动导入，它是从事件而不是 angular/core 导入的。首先，在 VS Code 中禁用自动导入。

那么，如果你的导入是这样的

import { EventEmitter } from 'events';

改成

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

【讨论】：