Having just started with Angular, I've encountered an issue that I can't seem to solve. When passing parameters to the router (using the Router class), the list of parameters on the target site is empty.
let navigationExtras: NavigationExtras ={
queryParams: {
uri: item.uri
}
}
this.router.navigateByUrl('articlelist/article-details', navigationExtras);
In the Article-details component (which uses the ActivatedRoute class):
ngOnInit(): void {
console.log("ArticleDetailsComponent " + JSON.stringify(this.route.url));
this.route.queryParamMap.map(paramMap =>{
this.uri = paramMap.get('uri');
console.log(this.uri);
});
}
The routing in the ArticleList module (one of the modules in my project) looks like this:
const routes: Routes = [{
path: '',
component: ArticleListComponent,
data: {
title: 'ArticleList'
},
},
{
path: 'article-details',
component: ArticleDetailsComponent,
data: {
title: 'ArticleDetails'
},
}
];
Upon logging route.url in the target component, the result appears as follows:
ArticleDetailsComponent {"_isScalar":false,"observers":[],"closed":false,"isStopped":false,"hasError":false,"thrownError":null,"_value":[{"path":"article-details","parameters":{}}]}
If anyone has a solution for this issue, I would greatly appreciate your help :)