javascript - @Output childEvent inte initialiserad

Jag är ganska ny i Angular-världen och arbetar med Angular 7. Jag gör några exempel där komponenter delar data sinsemellan. Delen från förälder till barn fungerar bra, men när jag försöker skicka några värden från barnet till föräldern fungerar det inte.

Det visar mig detta fel

app-komponent.html

<div>{{show}}</div>

<app-communicating-components [Parent]="message" (childEvent)="getMessage($event)"></app-communicating-components>

app-komponent.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'AngularLesson2';

  public message = 'Hello my child, Parents here';
  public show: string;


  getMessage($event) {
    this.show = $event;
  }
}

communicating-components.component.html

<p>
  {{Parent}}
</p>
<button (click)="fireEvent()">Fire from child</button>

communicating-components.component.ts

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

@Component({
  selector: 'app-communicating-components',
  templateUrl: './communicating-components.component.html',
  styleUrls: ['./communicating-components.component.css']
})
export class CommunicatingComponentsComponent implements OnInit {

  @Input() Parent;
  @Output() public childEvent = new EventEmitter();


  constructor() {
  }

  ngOnInit() {

  }

  fireEvent() {
    this.childEvent.emit('Hi, I am child');
    console.log("event fire" + this.childEvent);
  }

}

Vad gör jag för fel här?

Svar #1

Jag tror att problemet är att din import import { EventEmitter } from 'events'; inte är den du borde importera här. Försök att ändra importen till import { EventEmitter } from '@angular/core';

UPPDATERING

Här är ett stackblitz-exempel som visar att det fungerar

Svar #2

Med nyare versioner av Angular, som 8, måste du:

  1. Importera korrekt Emitter som k.s. sa: import { EventEmitter } from '@angular/core'
  2. Initiera sändaren för Output: @Output() emisor=new EventEmitter<type>();

Relaterade artiklar