Обновите другой компонент (вложенный на том же уровне) после того, как http-вызов Firebase успешно разместил данные

Question

Я пытаюсь отправить некоторые данные в базу данных Firebase и запросить сообщение об успешном завершении, которое перенаправляет пользователя на ту же страницу, сбрасывая форму в случае успешного выполнения запроса на публикацию.

Используются следующие компоненты: add-review.component.ts и addReview.service.ts.

add-review.component.ts находится в папке add-review и addReview.service.ts в папке service, эти две папки включенытот же уровень, вложенный в app.

После того, как служба успешно разместила данные, я пытался сообщить другому компоненту, чтобы форма могла быть сброшена () и повторно инициирована,без везения.

Я не могу сделать 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.component.ts из add-review.service.ts при успешном почтовом запросе?

Я знаю, что может быть более простой способ, то есть выполнить почтовый запрос прямо на компоненте, но меня интересует, как обмениваться такого рода вещами между компонентами, вложенными в маршрутизатор-розетку одного уровня.

Спасибо за помощь!

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