Angular 9 - 在路由之间共享数据

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)