Angular 9 - Sharing Data Between Routes

Question

I'd like to share data between routes, instead of getting it from the API on each component load.

Repo: https://github.com/theADAMJR/2PG-Dashboard

Currently when a user loads a /dashboard/:id/... route, this is called:

this.roles = await this.guildService.getRoles(this.guildId);

I'd only like this to be called once when a user loads any dashboard route: /dashboard/:id/....

How would I achieve this?

Answer 1

There are multiple ways to accomplish this. In its simplest form, you can just append your data to the routes state object:

this.router.navigate(['/some-route'], {state: {data: {...}}});

https://angular.io/guide/router

You could also do:

• Resolvers (https://angular.io/api/router/Resolve)
• Implement proper state management (https://ngrx.io/)
• Create a Singleton Service to act as your global in-app storage
• Use LocalStorage (not recommended, but you can do it)