Angular 5 路由中的 queryParams 列表为空
List of queryParams is empty in Angular 5 routing
我是 Angular 的新手,我一直在寻找问题的解决方案,但不幸的是我还没有找到。
当我将参数传递给路由器(class 路由器)时,但参数列表(在目标站点上)为空。
let navigationExtras: NavigationExtras ={
queryParams: {
uri: item.uri
}
}
this.router.navigateByUrl('articlelist/article-details', navigationExtras);
Article-details组件(路由是ActivatedRouteclass):
ngOnInit(): void {
console.log("ArticleDetailsComponent " + JSON.stringify(this.route.url));
this.route.queryParamMap.map(paramMap =>{
this.uri = paramMap.get('uri');
console.log(this.uri);
});
}
ArticleList 模块中的路由(我项目中的模块之一):
const routes: Routes = [{
path: '',
component: ArticleListComponent,
data: {
title: 'ArticleList'
},
},
{
path: 'article-details',
component: ArticleDetailsComponent,
data: {
title: 'ArticleDetails'
},
}
];
当我在目标组件中登录 route.url 时,结果是:
ArticleDetailsComponent
{"_isScalar":false,"observers":[],"closed":false,"isStopped":false,"hasError":false,"thrownError":null,"_value":[{"path":"article-details","parameters":{}}]}
如果有人知道如何修复它,我将不胜感激:)
我建议您不要依赖 Observables,而是获取路线的快照。这将为您提供一个包含您的参数的简单对象。
constructor(private route: ActivatedRoute) {}
ngOnInit() {
console.log(this.route.snapshot.queryParams);
}
您应该需要使用 ActivatedRoute
才能获取所有查询参数。
试试这个 -
constructor(
private activatedRoute: ActivatedRoute
) { }
this.activatedRoute.queryParams.subscribe(params => {
const URI = params['uri'];
});
更新
尝试像这样发送参数 -
this.router.navigate(['articlelist/article-details' ], {
queryParams: {
uri: item.uri || 'Default'
}
});
您可以在 app.routing.module.ts:
中定义参数
{ path: 'examplePath/:id', component: YourComponent},
然后这样发送:
this.router.navigate(['/examplePath/' + id]); (with @angular/router/Router)
然后在你的组件构造函数中你可以获得参数(@angular/router/ActivatedRoute):
this.activatedRoute.params.subscribe(params => {
this.yourObject = params['id'];
}
我是 Angular 的新手,我一直在寻找问题的解决方案,但不幸的是我还没有找到。 当我将参数传递给路由器(class 路由器)时,但参数列表(在目标站点上)为空。
let navigationExtras: NavigationExtras ={
queryParams: {
uri: item.uri
}
}
this.router.navigateByUrl('articlelist/article-details', navigationExtras);
Article-details组件(路由是ActivatedRouteclass):
ngOnInit(): void {
console.log("ArticleDetailsComponent " + JSON.stringify(this.route.url));
this.route.queryParamMap.map(paramMap =>{
this.uri = paramMap.get('uri');
console.log(this.uri);
});
}
ArticleList 模块中的路由(我项目中的模块之一):
const routes: Routes = [{
path: '',
component: ArticleListComponent,
data: {
title: 'ArticleList'
},
},
{
path: 'article-details',
component: ArticleDetailsComponent,
data: {
title: 'ArticleDetails'
},
}
];
当我在目标组件中登录 route.url 时,结果是:
ArticleDetailsComponent {"_isScalar":false,"observers":[],"closed":false,"isStopped":false,"hasError":false,"thrownError":null,"_value":[{"path":"article-details","parameters":{}}]}
如果有人知道如何修复它,我将不胜感激:)
我建议您不要依赖 Observables,而是获取路线的快照。这将为您提供一个包含您的参数的简单对象。
constructor(private route: ActivatedRoute) {}
ngOnInit() {
console.log(this.route.snapshot.queryParams);
}
您应该需要使用 ActivatedRoute
才能获取所有查询参数。
试试这个 -
constructor(
private activatedRoute: ActivatedRoute
) { }
this.activatedRoute.queryParams.subscribe(params => {
const URI = params['uri'];
});
更新
尝试像这样发送参数 -
this.router.navigate(['articlelist/article-details' ], {
queryParams: {
uri: item.uri || 'Default'
}
});
您可以在 app.routing.module.ts:
中定义参数{ path: 'examplePath/:id', component: YourComponent},
然后这样发送:
this.router.navigate(['/examplePath/' + id]); (with @angular/router/Router)
然后在你的组件构造函数中你可以获得参数(@angular/router/ActivatedRoute):
this.activatedRoute.params.subscribe(params => {
this.yourObject = params['id'];
}