Emitted Event 无法导致调用绑定方法答案

【问题标题】：Emitted Event could not result in calling the bound methodEmitted Event 无法导致调用绑定方法
【发布时间】：2021-04-05 05:06:30
【问题描述】：

在下面的代码中，我希望我有一个 EventEmitter 对象，如方法 onSubmitPost() 所示。当我编译代码时，方法中的日志 onSubmitPost 被显示。但是 onReceiveSubmittedEvtEmitter 方法中的日志永远不会显示。在下面的html代码中

    <app-post-create (onPostSubmittedEvtEmitter)="onReceiveSubmittedEvtEmitter($event)"></app-post-create>

方法 onReceiveSubmittedEvtEmitter 应该在事件 onPodtSubmittedEvtEmitter 发出时被执行，但由于我没有收到来自 onReceiveSubmittedEvtEmitter 方法的日志，我希望该事件尚未发出。请让我知道为什么没有发出事件以及如何解决它

post-create.component.ts：

//logs in this method are displayed
onSubmitPost(post: Post) {
this.post = {
  title: this.post.title,
  content: this.post.content
};
this.onPostSubmittedEvtEmitter.emit(this.post);
console.log("onSubmit->: post.title: " + post.title);
console.log("onSubmit->: post.content:" + post.content);
}

post-create.component.html：

<form>
<div class="form-group">
  <label>Title</label>
  <input type="text" class="form-control" name="title" required [(ngModel)]="post.title">
</div>
<div class="form-group">
  <label>Content</label>
  <textarea name="content" class="form-control" cols="10" rows="2" required [(ngModel)]="post.content"></textarea>
</div>
<button type="submit" class="btn btn-primary" (click)="onSubmitPost(post)">Create</button>
</form>

app.component.ts：

//console logs do not get displayed
import { Component } from '@angular/core';
import { Post } from './post-create/post-create.component';

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

  onReceiveSubmittedEvtEmitter(post: Post) {
    this.postsArray.push(post);
    console.log("onReceiveSubmittedEvtEmitter->: post.title: " + post.title);
    console.log("onReceiveSubmittedEvtEmitter->: post.content:" + post.content);
  }
}

app.component.html：

<app-post-create (onPostSubmittedEvtEmitter)="onReceiveSubmittedEvtEmitter($event)"></app-post-create>
<app-post-list [postsToAddToList]="postsArray"></app-post-list>

【问题讨论】：

标签： javascript angular typescript angular-event-emitter

【解决方案1】：

我刚刚找到了答案，因为我正在尝试解决它。只需用

装饰 EventEmitter

@Output

如下：

  @Output() onPostSubmittedEvtEmitter: EventEmitter<Post> = new 
  EventEmitter<Post>();

【讨论】：