TypeError: instance[output.propName].subscribe is not a function

Question

我正在尝试从 child 向 parent 组件发出事件。

Parent:

parent.ts

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

<app-upload (uploadEmit)="onChangeUpload($event)"></app-upload>

Child:

@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

Answer 1

import { EventEmitter } from 'events';

这是您的进口声明吗？

如果是，将其更改为

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

并禁用 VS 代码自动导入。 :)

Answer 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。

Answer 3

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

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

import { EventEmitter } from 'events';

改为

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

TypeError: instance[output.propName].subscribe is not a function

TypeError: instance[output.propName].subscribe is not a function

angular

eventemitter

emit