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

Question

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

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

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

服务成功 posted 数据后，我一直试图让其他组件知道，以便可以 reset() 并重新启动表单，但不幸的是。

我无法执行 eventEmitter 和 @Output()，因为 add-review.component.ts 是通过 <router-outlet> 提供的，所以没有直接的父子关系 link.

现在一些代码：

添加-review.component.ts:

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

添加-review.service.ts:

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

我愿意：

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

2) 否则，return 到同一页，数据仍在表单输入中。

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

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

感谢您的帮助！

Answer 1

您需要订阅组件中的 Observable add-review.component.ts:

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

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

Update a different component (nested on same level) after http call to Firebase has successfully posted data

components

parent-child

communicate

firebase

angular