Get parent parameter parameters in Angular?
I have the following route hierarchy:
const appRoutes:Routes = [
{
path: 'article',
component: ArticleComponent,
children: [
{
path: '',
component: ArticleListComponent
},
{
path: ':articleId',
component: ArticleDetailComponent,
children: [
{
path: '',
component: PageListComponent
},
{
path: ':pageId',
component: PageComponent
}]
}]
},
{path: '**', component: DefaultComponent},
];
When I click on the link Article
, the page is translated to:
" https://run.plnkr.co/article;listData=foo "
And then I see the following:
Now when I click on Article 2
, the page moves to
" https://run.plnkr.co/article;listData=foo/2;detailData=bar "
And then I see the following:
Now when I click on the link Page 33
, the page translates to:
" https://run.plnkr.co/article;listData=foo/2;detailData=bar/33;detailData=kro "
And then I see the following:
OK
As you can see, on the innermost component (one page component), I have set the code to view the current parameters:
Page component! {{params | json}}
which is filled in:
export class PageComponent {
constructor(private activatedRoute_:ActivatedRoute) {
activatedRoute_.params
.subscribe(params => {
this.params=params;
});
}
Question:
Currently the value params
is only { "pageId": "33", "detailData": "kro" }
that belongs to the final route.
But how can I get the values of the previous routes?
I know I can read the request, but I find it unconventional.
Internal URL:
" https://run.plnkr.co/article;listData=foo/2;detailData=bar/33;detailData=kro "
So, basically I am asking how can I extract all parameters from the previous routes.
(I mean, what are the implications for articleId
, listData
,detailsData
(the first))?
source to share
You can get all the parenting options with a snapshot. Detail component:
let node = activatedRoute_.snapshot;
while(node) {
console.log('component', node.component.name, ', params:', node.params);
node = node.parent;
}
component ArticleDetailComponent ,
params: Object {articleId: "1", detailData: "bar"}
component ArticleComponent , params: Object {listData: "foo"}
component RootComponent , params: Object {}
source to share
You can manually send parameters when calling states inside links, but honestly this is not the best solution. My best suggestion is to use state resolvers and implement solvers to achieve this.
Each state will have a corresponding resolver that will resolve the parameters you need from the previous state. Here's a link to the documentation:
https://angular.io/docs/ts/latest/api/router/index/Resolve-interface.html
The concept is that, inside the i-th state permission, you can still access the state i-1 state parameters so that you can pass them to the new state.
source to share