Я застрял с BehaviorSubject в angular

Я создал централизованную службу обработки ошибок, используя BehaviorSubject в Angular v 17. Она не работает должным образом!

Проблемными местами являются: NotificationService -> централизованный обработчик ошибок. NotificationComponent -> Многоразовое удобное для пользователя сообщение об ошибке и прогрессе, показывающее модальное всплывающее окно, я напрямую добавил его в свой компонент приложения. Surrender Pet Component -> Где я пытаюсь использовать опцию «Уведомление для показа».

Я думаю, что эти BhaviourSubjects не передают данные так, как я ожидал.

Служба уведомлений:

    import { Injectable } from '@angular/core';
    import { BehaviorSubject, Subject } from 'rxjs';

    @Injectable({
    providedIn: 'root'
    })
    export class NotificationService {
       successMessageSubject = new BehaviorSubject<string | null>(null);
       errorMessageSubject = new BehaviorSubject<string | null>(null);

       successMessageAction$ = this.successMessageSubject.asObservable();
       errorMessageAction$ = this.errorMessageSubject.asObservable();

       setSuccessMessage(message: string) {
       this.successMessageSubject.next(message);
     }

   setErrorMessage(message: string) {
   this.errorMessageSubject.next(message);
    console.info(this.errorMessageSubject.getValue());
   }

   clearSuccessMessage() {
    this.successMessageSubject.next(null);
    }

    clearErrorMessage() {
      this.errorMessageSubject.next(null);
    }

   clearAllMessages() {
    this.clearSuccessMessage();
    this.clearErrorMessage();
     }
    }

Компонент уведомления:

import { Component, OnInit, inject } from '@angular/core';
import { NotificationService } from '../../../core/services/notifiaction/notification.service';
import { AsyncPipe, CommonModule, NgIf } from '@angular/common';
import { tap } from 'rxjs';

@Component({
  selector: 'app-notification',
  standalone: true,
  imports: [NgIf,AsyncPipe,CommonModule],
  templateUrl: './notification.component.html',
  styleUrl: './notification.component.scss',
 
})
export class NotificationComponent implements OnInit {
   
   private notificationService:NotificationService = inject(NotificationService);
   
  
   successMessage$ = this.notificationService.successMessageAction$.pipe(
     tap((message)=>{
      if (message){
      console.info('clicked')
      setTimeout(()=>{
        this.notificationService.clearAllMessages()  
      },5000)
    }
     })
   )

   errorMessage$ = this.notificationService.errorMessageAction$.pipe(
    tap((message)=>{
      console.info(message);
      if (message){
     console.info('clicked')
     setTimeout(()=>{
       this.notificationService.clearAllMessages()  
     },5000)
    }
    })
  )


   ngOnInit(): void {
    console.info("initialized")
  }
  }

Сдать компонент питомца

import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
import { RouterLink } from '@angular/router';
import { ButtonComponent } from '../../../shared/components/button/button.component';
import { NgClass, NgIf, } from '@angular/common';
import { Component, inject } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { PetsAdopteService } from '../../../core/services/pets-adopte/pets-adopte.service';
import { SurrenderPet } from '../../../core/models/surrenderPet.model';
import { NotificationService } from '../../../core/services/notifiaction/notification.service';

@Component({
  selector: 'app-surrender-pet',
  standalone: true,
  imports: [
    ReactiveFormsModule,
    NgClass,
    RouterLink,
    NgIf,
    ButtonComponent,
    HttpClientModule
  ],
  providers:[PetsAdopteService,NotificationService],
  templateUrl: './surrender-pet.component.html',
  styleUrl: './surrender-pet.component.scss'
})
export class SurrenderPetComponent {

  private petAdopteService=inject(PetsAdopteService);
  private notificationService=inject(NotificationService);

  submitted:boolean = false;

  registerPet= new FormGroup({
    name: new FormControl<string>('',[Validators.required]),
    phoneNo:new FormControl<string>('',[Validators.required]),
    petType:new FormControl<string> ('',[Validators.required]),
    location:new FormControl<string>('',[Validators.required]),
    otherDetails:new FormControl<string>('',[Validators.required])
  })

  onSubmit(){
      this.submitted = true;
      if (this.registerPet.valid){
       this.petAdopteService.sendPetSurrender_Request(this.registerPet.value as SurrenderPet).subscribe(
        {
          next:(data)=>{
         console.info(data);
        }
         
        }
       )
      }
  }
}

HTML-шаблон компонента уведомления:

<div class = "z-40">
   <div class = "z-40" *ngIf = "successMessage$ | async as successMessage" id = "toast-success" class = " fixed fixed bottom-5 right-5 flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role = "alert">
       <div class = "inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
           <svg class = "w-5 h-5" aria-hidden = "true" xmlns = "http://www.w3.org/2000/svg" fill = "currentColor" viewBox = "0 0 20 20">
               <path d = "M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
           </svg>
           <span class = "sr-only">Success icon</span>
       </div>
       <div class = "ms-3 text-sm font-normal">{{successMessage}}</div>
       <button type = "button" class = "ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target = "#toast-success" aria-label = "Close">
           <span class = "sr-only">Close</span>
           <svg class = "w-3 h-3" aria-hidden = "true" xmlns = "http://www.w3.org/2000/svg" fill = "none" viewBox = "0 0 14 14">
               <path stroke = "currentColor" stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "2" d = "m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
           </svg>
       </button>
   </div>

   <div *ngIf = "errorMessage$ | async as errorMessage" id = "toast-failure" class = " fixed fixed bottom-5 right-5 flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role = "alert">
       <div class = "inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
           <svg class = "w-5 h-5" aria-hidden = "true" xmlns = "http://www.w3.org/2000/svg" fill = "currentColor" viewBox = "0 0 20 20">
               <path d = "M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5Zm3.707 8.207-4 4a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L9 10.586l3.293-3.293a1 1 0 0 1 1.414 1.414Z"/>
           </svg>
           <span class = "sr-only">Success icon</span>
       </div>
       <div class = "ms-3 text-sm font-normal">{{errorMessage}}</div>
       <button type = "button" class = "ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8 dark:text-gray-500 dark:hover:text-white dark:bg-gray-800 dark:hover:bg-gray-700" data-dismiss-target = "#toast-success" aria-label = "Close">
           <span class = "sr-only">Close</span>
           <svg class = "w-3 h-3" aria-hidden = "true" xmlns = "http://www.w3.org/2000/svg" fill = "none" viewBox = "0 0 14 14">
               <path stroke = "currentColor" stroke-linecap = "round" stroke-linejoin = "round" stroke-width = "2" d = "m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
           </svg>
       </button>
   </div>
</div>
   

PetsAdopteService, где я вызывал функции setMessages!

    import { HttpClient } from '@angular/common/http';
    import { Injectable, inject } from '@angular/core';
    import { EMPTY, Observable, catchError, tap } from 'rxjs';
    import { SurrenderPet } from '../../models/surrenderPet.model';
    import { environment } from '../../../../environments/environment.development';
    import { petsSurrenderEndpoints } from '../../constants/APIEndPoints/petsAdopte.EndPoints';
    import { NotificationService } from '../notifiaction/notification.service';

    @Injectable({
      providedIn: 'root'
    })
    export class PetsAdopteService {

    constructor() { }

    private http:HttpClient=inject(HttpClient);
    private notificationService=inject(NotificationService);

    sendPetSurrender_Request(payload:SurrenderPet):Observable<SurrenderPet>{
     return this.http.post<SurrenderPet>                                                                              (environment.apiUrl+petsSurrenderEndpoints?.createSurrenderRequest,payload).pipe(
        tap((data)=>{
        this.notificationService.setSuccessMessage('Your request sent successfully')
      }),
      catchError((error)=>{
        console.info(error)
         this.notificationService.setErrorMessage("eROR");
         return EMPTY;
      })
     )
     }
    }

Есть ли способ решить эту проблему, не выбирая сигнал, потому что я хочу узнать больше о rxjs!