在对 Firebase 的 http 调用成功发布数据后，更新不同的组件（嵌套在同一级别）

Question

我正在尝试将一些数据发布到 firebase 数据库并提示成功消息，将用户重定向到同一页面，并在发布请求成功的情况下重置表单。

涉及的组件有add-review.component.ts和addReview.service.ts。

add-review.component.ts在add-review文件夹中，addReview.service.ts在service文件夹中，这两个文件夹在同一层级，嵌套在app下。

服务成功发布数据后，我一直试图让其他组件知道，以便可以 reset() 并重新启动表单，但没有运气。

我不能使用eventEmitter 和@Output()，因为add-review.component.ts 是通过<router-outlet> 提供的，因此没有直接的父子链接。

现在有一些代码：

add-review.component.ts:

onSubmitReview() {
    const newReview = this.addReviewForm.value;
    this.addReviewService.addNewReview(newReview);
  }

add-review.service.ts：

addNewReview(newReview: Review) { 
    this.http.post('https://myApp-6c621.firebaseio.com/reviews.json', newReview).subscribe(reportData => {
      console.log(reportData);
}

我想：

1）如果数据已经成功发布，返回页面并重置表单（在我已经使用this.router.navigate(['/add-review']);重定向的服务文件中）并且它工作正常。

2) 否则，返回同一页面，数据仍在表单输入中。

如何在成功发布请求后从add-review.service.ts 更新add-review.component.ts？

我知道可能有一种更简单的方法，即直接在组件上执行发布请求，但我对如何在同级路由器插座嵌套组件之间进行此类通信感兴趣。

感谢您的帮助！

Answer 1

需要在组件add-review.component.ts:订阅Observable

onSubmitReview() {
    const newReview = this.addReviewForm.value;
    this.addReviewService.addNewReview(newReview).subscribe(
        response => {
            //reset here using reset() method of forms
        }, error => {
            console.log(error) //catch error
        });
}

为您服务：

addNewReview(newReview: Review) { 
    return this.http.post('https://myApp-6c621.firebaseio.com/reviews.json', newReview);
}

注意：使用 reset() 方法。参考这个文档：https://angular.io/api/forms/FormControl