Ngx-boostrap模式发送被删除的实体id到另一个组件

Question

我有一个帖子列表，如果我点击一个帖子，一个ngx-bootstrap模式打开，显示该帖子的详细信息。现在我有两个选择。读取信息后关闭模态，或者按下delete按钮删除帖子。删除工作得很好，但帖子只会在刷新后从页面上消失，我希望它立即消失。我想我可以发出已删除帖子的id，然后我可以过滤帖子列表，并简单地删除id不再在列表中的帖子。但这不起作用，因为发射器似乎没有到达所谓的父组件。这是我尝试过的:

<div class="modal-body">
<form>
<p>About</p>
<div class="form-check">
<p>{{post.about}}</p>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button"  class="btn" (click)="deletePost()">Delete</button>
<button type="button" class="btn btn-default" (click)="bsModalRef.hide()">Cancel</button>
</div>

@Input() post: any;
@Output() postDeleted: EventEmitter<any> = new EventEmitter(); 

deleteBadge() {
this.postService.deletePost(this.post.id)
.subscribe({
next: () => {
this.bsModalRef.hide();
this.triggerEvent(this.post.id);
},
error: err => console.log(err)
})
}

triggerEvent(id: number) {
this.postDeleted.emit(id);
}

这是父组件，我在这里打开modal:

getPosts() {
this.postService.getPosts().subscribe({
next: (posts: any[]) => this.posts= posts,
error: err => console.log(err)
})
}
openPostModal(post: any) {
const setup = {
class: 'modal-dialog-centered'
};
this.postModal = this.modalService.show(ViewPostModalComponent, setup);
this.postModal.content.post = post;
}
onPostDeleted(id: any) {
this.posts = JSON.parse(
JSON.stringify(this.posts.filter((post) => post.id !== id))
);
}

在父元素的HTML中我有这个:

<div *ngFor="let post of posts">
<div (postDeleted)="onPostDeleted($event)">
<img src="{{post.photo.url}}" (click)="openPostModal(post)">
<p>{{post.name}}</p>
</div>

Answer 1

它不起作用，因为postDeleted属于您的模态组件，而不是div。您应该在openPostModal中订阅postDeleted。这里最好使用Subject而不是EventEmitter，因为EventEmitter是为组件之间的交互而设计的。

在你的模态组件中:

// without @Output() 
postDeleted$: Subject<any> = new Subject();

在父组件中:

openPostModal(post: any) {
const setup = {
class: 'modal-dialog-centered'
};
this.postModal = this.modalService.show(ViewPostModalComponent, setup);
this.postModal.content.post = post;
// take(1) is used to prevent memory leak
this.postModal.content.postDeleted$.pipe(
take(1)
).subscribe((id) => this.onPostDeleted(id));
}