javascript - angular: EventEmitter は埋め込みコンポーネントで定義されていません

Question

angular を学習していますが、問題があります。メイン コンポーネント内にコンポーネントがあり、イベントを発行したいのですが、エラーが発生します。これが私のコードです：

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

@Component({
  selector: 'app-game-control',
  templateUrl: './game-control.component.html',
  styleUrls: ['./game-control.component.css']
})
export class GameControlComponent implements OnInit {
  @Output() numberGenerated: EventEmitter<{v: number}> = new EventEmitter<{v: number}>();
  game: any;

  constructor() { }

  ngOnInit() {
  }

  startGame() {
    this.game = setInterval(this.generateEvent, 1000);
  }

  stopGame() {
    clearInterval(this.game);
  }

  generateEvent(): void {
    const n = Math.floor((Math.random() * 10) + 1);
    this.numberGenerated.emit({v: 3});
    console.log('event sent');
  }
}

これは、このコンポーネントの HTML コードです。

スタートゲーム エンドゲーム

app-rootcomponent html は次のとおりです。

<div>
    <app-game-control (numberGenerated)="numberGeneratedEvent($event)">
    </app-game-control>
    <hr>
    <br>
</div>

しかし、「ゲームを開始」ボタンをクリックすると、添付の画像からエラーが発生します。

これはウィンドウであり、コンポーネントではないことに注意してください。私が間違っていることは何ですか？