Is it a good practice to pass data with the angular router to a component or should i use an service instead?
At the moment the component gets the data like this:
this.account = activatedRoute.snapshot.data.account
-
1Uh, I've never seen this method of passing data through the router. Seems like a clumsy hack to me. The router is for routing, and services are for sharing data across components.Jeremy Thille– Jeremy Thille2021-10-01 08:31:40 +00:00Commented Oct 1, 2021 at 8:31
-
Okay i have the same feeling ;) Thanks for your response.MarcelSauter– MarcelSauter2021-10-01 08:58:57 +00:00Commented Oct 1, 2021 at 8:58
Add a comment
|
2 Answers
If you want to pass data through a route, here is a simple example.
Make your route to look like this:
{ path: 'todo', component: TodoComponent, data: { id:'1', name:"Todo Title"} }
Then in your Component you can do something like this:
ngOnInit() {
this.activatedroute.data.subscribe(data => {
this.todo = data;
})
}
Was this helpful?
2 Comments
MarcelSauter
Yes thanks, but passing data threw an service is the better practice or am i wrong?
Omerko
Yes, you are right. There are three ways to pass data from component to component, excluding passing through routes. Input and Output Decorators and Service. In service, you can store some data and pull that data into components that you wish. Now, if you wish to immediately get data from the service once it was emitted, you can use the RxJS feature called Subject. Create a Subject, emit data from Component A, and in Component B make sure to subscribe to that subject to always get the latest data. Just make sure to unsubscribe from the subject, to prevent memory leaks.
There are several ways to pass data to an angular component.
For objects like user account, I would use a provider (to have it ready on component init), a service (for sharing around app) or a guard (e.g. if you want to navigate out when not logged in).
When I want to reuse the same component in different routes and give it some hints about is behavior, I would use router data.
Another use case I met is to define a global app state using the activated route(s). Each route may define its data, a service listen for router events and stores the merged state. It helps me with large apps to have a route-based configuration for title, metas, toolbar and menus visibility, etc...
