I'm trying to get the :id
param defined in
RouterModule.forRoot([ { path: 'orders', component: ListComponent, children: [ { path: 'view/:id', component: ViewComponent }, ] } ])
from ListComponent
.
I already tried:
route: ActivatedRoute route.params.subscribe(params => { let id = +params['id']; })
from ListComponent
, but the params
array is empty, I suppose it's because the :id
param belongs to ViewComponent
not ListComponent
.
How can I get the id
param in ListComponent
?
The ActivatedRoute has getters to access its parent/child route information. In order to access the first child route from the parent, you would use: this.route.firstChild.params. If you wanted all the child routes you would use the children property. This returns an array of ActivatedRoute.
You can create a nested routing by defining child routes using the children property of a route (alongside a path and component properties). You also need to add a nested router-outlet in the HTML template related to the component linked to the parent route (In our case it's the admin route).
In Angular, the router lets you add child routes using the children property inside the routing module. Here you can see that the routing module has been updated with the child route and added to the array of components so we do not need to import all of them wherever we go.
The ActivatedRoute is the API that holds observable data that you can use to react to events with. You can subscribe to specific observable properties to get data from it asynchronously. The ActivatedRoute also contains ActivatedRouteSnapshot.
You can use the firstChild
property or the ActivatedRoute
to get the child route:
route.firstChild.snapshot.params['id']
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With