问题描述
在下面的代码中，我希望我有一个 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>
解决方法
我刚刚找到答案，因为我正在尝试解决它。 只需用
装饰EventEmitter@Output
如下：
@Output() onPostSubmittedEvtEmitter: EventEmitter<Post> = new
EventEmitter<Post>();