`Sharing data between multiple Angular components using a service is not functioning properly`

Question

`Sharing data between multiple Angular components using a service is not functioning properly`

This is a sharing service called dShareService:

@Injectable()
export class DInfoShareService {
    constructor() { }

    // Observable sources    
    private dInfo = new Subject<DInfo>();

    dInfo$ = this.dInfo.asObservable();

    // Service message commands
  public SetDInfo(dinfo: DInfo) {     
    this.dInfo.next(dinfo);
  }
}

This is the parent component:

Within the parent component, there is a button click event that triggers a method which passes data to a service.

GoToDetail(value){       
    this.dShareService.SetDInfo(value);

    // This is a child component and is accessed via a route. Typically, I would use the current state and pass data to the child 
    // component. However, in this scenario, there are 3 tab pages on the UI and each page requires this data.
   
 this.router.navigateByUrl('/dchild', {
          state: {dInfo: value}
    });

This is the child component:

Within the constructor,

this.dinfoShareService.dInfo$.subscribe(res=>
     {
       //This part never gets executed
       this.dInfo = res;
     } 
  );

The subscription within the child component is not triggering. Can anyone help me identify what I am doing wrong?

angular typescript angular-components

Answer 1

Answer №1

Give this a shot, We can start by updating the Service.ts file

import { BehaviorSubject, Observable, throwError } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiWalletService {
  private behaviorSubject = new BehaviorSubject<Object>('');

  setBehaviorView(data: object) {
    this.behaviorSubject.next(data);
  }

  /** Retrieve Behavior for user registration */
  getBehaviorView(): Observable<object> {
    return this.behaviorSubject.asObservable();
  }

}

In component1.ts

 {
     ngOnInit() {
            this.setBehaviorView({
              'data':'XYZ'
            })
       }
    }

In component2.ts

{

 constructor(private service: YourService){}

 ngOnInit() {
 this.service.getBehaviorView().subscribe(async (data) => {
   if (data && data != undefined) {
      console.log(data)
    }
  })
}
}

Answer 2

Give this a shot, We can start by updating the Service.ts file

import { BehaviorSubject, Observable, throwError } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ApiWalletService {
  private behaviorSubject = new BehaviorSubject<Object>('');

  setBehaviorView(data: object) {
    this.behaviorSubject.next(data);
  }

  /** Retrieve Behavior for user registration */
  getBehaviorView(): Observable<object> {
    return this.behaviorSubject.asObservable();
  }

}

In component1.ts

 {
     ngOnInit() {
            this.setBehaviorView({
              'data':'XYZ'
            })
       }
    }

In component2.ts

{

 constructor(private service: YourService){}

 ngOnInit() {
 this.service.getBehaviorView().subscribe(async (data) => {
   if (data && data != undefined) {
      console.log(data)
    }
  })
}
}

Answer 3

Answer №2

Your implementation of the Subject in your service seems to be incorrect:

@Injectable()
export class DInfoShareService {
    constructor() { }

    // Observable sources    
    private dInfo = new Subject<DInfo>();


    // Service message commands
  public SetDInfo(dinfo: DInfo) {     
    this.dInfo.next(dinfo);
  }
}

It should not be called inside the constructor, instead use it inside the ngOninit method.

     ngOnInit(): void {

this.dinfoShareService.dInfo.subscribe(res=>
     {
       //this one never happen
       this.dInfo = res;
     } 
  );

});

Answer 4

Your implementation of the Subject in your service seems to be incorrect:

@Injectable()
export class DInfoShareService {
    constructor() { }

    // Observable sources    
    private dInfo = new Subject<DInfo>();


    // Service message commands
  public SetDInfo(dinfo: DInfo) {     
    this.dInfo.next(dinfo);
  }
}

It should not be called inside the constructor, instead use it inside the ngOninit method.

     ngOnInit(): void {

this.dinfoShareService.dInfo.subscribe(res=>
     {
       //this one never happen
       this.dInfo = res;
     } 
  );

});

Answer 5

Answer №3

For your decorator to be singleton across components, you should modify it to

@Injectable({ providedIn: 'root' })

. Otherwise, it will create multiple instances for different components.

Another thing to consider is:

GoToDetail(value){       
    this.dShareService.SetDInfo(value);   
    this.router.navigateByUrl('/dchild', {
          state: {dInfo: value}
    });
}

In the above code snippet, the SetDInfo method is called before navigation takes place. This means that your child component may not receive the updated value in time. To address this issue, change your Subject to a BehaviorSubject so that the last set value can be accessed.

Answer 6

For your decorator to be singleton across components, you should modify it to

@Injectable({ providedIn: 'root' })

. Otherwise, it will create multiple instances for different components.

Another thing to consider is:

GoToDetail(value){       
    this.dShareService.SetDInfo(value);   
    this.router.navigateByUrl('/dchild', {
          state: {dInfo: value}
    });
}

In the above code snippet, the SetDInfo method is called before navigation takes place. This means that your child component may not receive the updated value in time. To address this issue, change your Subject to a BehaviorSubject so that the last set value can be accessed.

`Sharing data between multiple Angular components using a service is not functioning properly`

Answer №1

Answer №2

Answer №3

Similar questions

Why are my values not being applied to the model class in Angular 7?

Converting an Array of Objects into a single Object in React: A Tutorial

Unable to initiate ng-click event in AngularJS

Empty dialog box displayed in production for Angular material datepicker

Encountering an Invalid JSON error on the Developer console

Unlocking the Power of Angular 12: Leveraging the Subscribe Method to Access Multiple REST APIs

Do not trigger subscription after debounce time in Angular

What is the best approach to utilize the GET method in Angular 2 to call a SOAP API

Displaying percentage values within the chart in ng2-chart: A simple guide

The kendo-chart-tooltip script is causing an error by generating an Uncaught TypeError: background.isDark is not a recognized function

My Angular2+ application is encountering errors with all components and modules displaying the message "Provider for Router not found."

What is the process for bringing in AngularJS 2? // Bring in { routerTransition } from './router.module;

Invoke a public method in TypeScript

What is the process for sending a post request in Ionic 2 to a Node server running on localhost?

Discover the effective method in Angular to display a solitary password validation message while dealing with numerous ones

Error message: WebStorm shows that the argument type {providedIn: "root"} cannot be assigned to the parameter type {providedIn: Type<any> | "root" | null} and InjectableProvider

Troubleshooting Issues with Imports in Jest and Typescript

working with JSON arrays in angular framework

Is it possible to combine various SVG icons into a single component?

Responsive Container MUI containing a grid