Service to communicate components only works on one-CodePudding

Create a service to notify my components of any changes to 'idCustomer'. I would like to do some actions when that property changes. These actions must be done in different components. I made a console.log to know if the change is received. But it only shows me the message for one component. I'm new to angular, if there is a more efficient way to communicate the 'idCustomer' it would be welcome. Section and Customer are siblings.

LoginService

  idCustomerChanged = new Subject<string>();
  
  constructor(private http: HttpClient) { }

  login(requestBody: any): Observable<ResponseBody> {
    return this.http.post<ResponseBody>(`${this.apiServerUrl}/Customer/GetCustomerLogin`, requestBody);
  }

  addIdCustomer(idCustomer: string) {
    this.idCustomer = idCustomer;
    this.idCustomerChanged.next(this.idCustomer);
  }
  removeIdCustomer() {
    this.idCustomer = '';
    this.idCustomerChanged.next(this.idCustomer);
  }

  getIdCustomer() {
    return this.idCustomer;
  }

LoginComponent (which changes the 'idCustomer')

submit() {
    if (this.form.valid) {
      this.loginService.login(this.form.value).subscribe((response) => {
        if (response.data) {
          this.loginService.addIdCustomer(response.data[0].idCustomer);
          this.router.navigate(['/products']);         
        } else {
          this.error = 'Invalid Credentials';
        }      
      });
    }
}

NavBarComponent (it shows the message)

  idCustomer: string = '';
  subscription: Subscription;

  constructor(private loginService: LoginService, private router: Router) {
    this.subscription = this.loginService.idCustomerChanged.subscribe((idCustomer) => {
      this.idCustomer = idCustomer;
      console.log(this.idCustomer   ' from nav-bar');
    });
  }

  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

CustomerComponent (this not)

  idCustomer: string = '';
  submenusCustomer = ['Profile', 'History', 'Account Payables'];
  subscription: Subscription;

  constructor(private loginService: LoginService) {
    this.subscription = this.loginService.idCustomerChanged.subscribe((idCustomer) => {
      this.idCustomer = idCustomer;
      console.log(this.idCustomer   ' from customer-page');
    });
  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

SectionComponent (this not)

  idCustomer: string = '';
  subscription: Subscription;

  constructor(private loginService: LoginService) {
    this.subscription = this.loginService.idCustomerChanged.subscribe((idCustomer) => {
      this.idCustomer = idCustomer;
      console.log(this.idCustomer   ' from seccion-page');
    });
  }

  ngOnInit(): void {

  }
  ngOnDestroy() {
    this.subscription.unsubscribe();
  }

CodePudding user response：

It's better to add other variable return subject as observable: On top of your login service and after defining your subject :

  idCustomerChanged = BehaviorSubject<any>({})<string>();
//new
idCustomerChanged$:Observable = idCustomerChanged.asObservable();

//// On your CustomerComponent and other components :

 idCustomerChanged$:Observable;//declare your observable;
    constructor(private loginService: LoginService) {
    this.idCustomerChanged$ = this.loginService.idCustomerChanged$
        this.subscription = this.idCustomerChanged.subscribe((idCustomer) => {
          this.idCustomer = idCustomer;
          console.log(this.idCustomer   ' from seccion-page');
        });
      }