javascript - 当我使用 eventEmitter 从我的子组件传递事件时，为什么我没有收到我的事件？

Question

我曾尝试使用 eventEmitter 来处理该事件，但不知何故，该事件没有通过。

这是我尝试使用 eventEmitter 传递对象的子组件

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


@Component({
  selector: 'app-favorite',
  templateUrl: './favorite.component.html',
  styleUrls: ['./favorite.component.css']
})
export class FavoriteComponent implements OnInit {
  @Input('isFavorite') isFavorite?: boolean
  @Output() change = new EventEmitter();
  constructor() { }

  ngOnInit(): void {
  }
  onClick(){
    this.isFavorite = !this.isFavorite
    console.log(this.isFavorite)
    this.change.emit({newValue: this.isFavorite});
  }

}

这是我的子组件的模板：

<p>favorite works!</p>
<button (click)=onClick()>click</button>

这是我要将事件传递给的父组件：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-ly';
  post = {
    title: "Title",
    isFavorite:false
  }
  onFavoriteChange(isFavorite:any){
    console.log("Favourite change",isFavorite);
    console.log(isFavorite)
  }
}

这是我的父组件的模板：

<app-favorite [isFavorite]="post.isFavorite" (change)="onFavoriteChange($event)"></app-favorite>

我尝试打印从子组件传递到控制台的事件，这就是我得到的：

true
app.component.ts:15 Favourite change undefined
app.component.ts:16 undefined
false
app.component.ts:15 Favourite change undefined
app.component.ts:16 undefined
true
app.component.ts:15 Favourite change undefined
app.component.ts:16 undefined
false
app.component.ts:15 Favourite change undefined
app.component.ts:16 undefined

标签： javascriptangulartypescriptangular-event-emitter