I'm new to Angular and I've looked for solution of my problem, but unfortunately I haven't found that. When I 'm passing parameters to the router (class Router), but list of params (on target site) is empty.
let navigationExtras: NavigationExtras ={
queryParams: {
uri: item.uri
}
}
this.router.navigateByUrl('articlelist/article-details', navigationExtras);
Article-details component (route is 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);
});
}
Routing in ArticleList module (one of modules in my project):
const routes: Routes = [{
path: '',
component: ArticleListComponent,
data: {
title: 'ArticleList'
},
},
{
path: 'article-details',
component: ArticleDetailsComponent,
data: {
title: 'ArticleDetails'
},
}
];
When I logged route.url in target component the result was:
ArticleDetailsComponent {"_isScalar":false,"observers":[],"closed":false,"isStopped":false,"hasError":false,"thrownError":null,"_value":[{"path":"article-details","parameters":{}}]}
If somebody knows how to fixed it, I'll be grateful for help :)
You should need to use ActivatedRoute
in order to get all query params.
Try this -
constructor(
private activatedRoute: ActivatedRoute
) { }
this.activatedRoute.queryParams.subscribe(params => {
const URI = params['uri'];
});
Try to send params like this -
this.router.navigate(['articlelist/article-details' ], {
queryParams: {
uri: item.uri || 'Default'
}
});