Angular 角度5-在用户删除时从父视图中删除子组件

我有两个组件一个时刻（帖子/帖子）和一条评论，每个时刻可以有多条评论

在moment-details.component中，我插入了一个moment-comment.component。“注释”组件显示与该时刻关联的所有注释

时刻细节.component.html

...

力矩细节.组件.ts

@组件({
选择器：“应用程序时刻细节”，
templateUrl:'./MomentDetail.component.html'，
样式URL:['./时刻细节.component.scss']
})
导出类MomentDetailComponent实现OnInit{
时刻：时刻；
构造函数（专用路由器：路由器、，
专用路由：激活的路由，
私人动量服务：动量服务，
私有authService:authService，
私有commentService:commentService）{}
恩戈尼尼特（）{
this.route.params.switchMap（（params）=>{
设力矩_id=params['id']；
返回此.momentService.get（即时id）；
}).订阅（（res）=>{
控制台日志（res）；
这个时刻=秒；
this.user=res.author；
});
this.authService.getAuthenticatedUser（）.subscribe（（res）=>{
this.auth=res；
});
}
}

力矩注释循环遍历所有注释，并创建力矩注释组件的新实例

现在，在moment-comment.component.ts中，用户可以触发删除其注释

@组件({
选择器：“应用程序时刻注释”，
templateUrl:'./MomentComment.component.html'，
样式URL:['./时刻注释.component.scss']
})
导出类MomentCommentComponent实现OnInit{
@Input（）注释：注释；
@Input（）auth:any；
@输入（）力矩：任意；
答复:有,；
答复:有,；
显示回复：布尔；
inEdit=假；
编辑评论：任何；
构造函数（私有commentService:commentService）{}
...
删除（）{
this.commentService.delete（this.moment.\u id，this.comment.\u id）.subscribe（（res）=>{
控制台日志（res）；
}，（错误）=>{
控制台日志（err）；
});
}
...
}

果然，当用户触发delete（）函数时，后端会更新我的数据库，以显示注释已从当前删除

---

我的问题是，如何在前端（即父级（时刻详细信息）视图中反映此更改？

您需要将事件从注释组件发送到其父级（即详细信息组件）并删除注释 从数组详细信息组件，如下所示：

moments-detail.component.html

...

力矩-detail.component.ts

removeComment（索引：编号）{
此.力矩.注释.拼接（索引1）；
}

moment-comment.component.ts

。。。
@Output（）public onDelete:EventEmitter=neweventemitter（）；
@Input（）注释：注释；
...
删除（）{
this.commentService.delete（this.moment.\u id，this.comment.\u id）.subscribe（（res）=>{
控制台日志（res）；
this.onDelete.emit（）；
}，（错误）=>{
控制台日志（err）；
});
}

更新对象，以便

ui

获得updated@Aravind是的，我猜是这样的，但是从moment-comment.component中，我无法访问整个

moment？.comments

，正如您在ngFor的moment.component中看到的那样。我每次传递一条评论。你能在

plunker

或

stackblitz

中重现错误吗？这样我可以帮你修复你是如何获得这一时刻的？评论？？你能发布这一时刻吗。细节组件ts？哦，EventEmitters现在我知道它的用途了。当我调用this.onDelete（）时，我在实现这个和那个时遇到了一个小问题，它说“不能调用类型缺少调用签名的表达式。类型EventEmitter没有兼容的调用签名”啊，它是this.onDelete.emit（），你对这个答案的看法是什么-这是事件发射器的有效用例吗，因为我们没有在服务中使用它？如果他正在使用服务，他不需要从孩子那里发出它component@KHAN很抱歉忘记了

.emit（）

，我实际上没有测试代码。是的，我认为我们的是一个有效的用例，因为我们正在进行子组件到父组件的通信。