我使用angular2.0.0-beta.7。当组件加载在/path?Query =value1它被重定向到/path。为什么GET参数被移除?如何保存参数?
我的路由器出错了。如果我有一条主干道
@RouteConfig([
{
path: '/todos/...',
name: 'TodoMain',
component: TodoMainComponent
}
])
我的孩子就像
@RouteConfig([
{ path: '/', component: TodoListComponent, name: 'TodoList', useAsDefault:true },
{ path: '/:id', component: TodoDetailComponent, name:'TodoDetail' }
])
那么我就不能在TodoListComponent中获得参数。我所能得到的
params("/my/path;param1=value1;param2=value2")
但我想要经典的
query params("/my/path?param1=value1¶m2=value2")
你只需要在构造函数中注入ActivatedRoute,然后在它上面访问params或queryParams
constructor(private route:ActivatedRoute){}
ngOnInit(){
this.route.queryParams.subscribe(params=>{
let username=params['username'];
});
}
在某些情况下,它在NgOnInit中不给出任何东西…可能是因为在初始化参数之前调用了init,在这种情况下,你可以通过函数debounceTime(1000)让可观察对象等待一段时间来实现这一点
如= >
constructor(private route:ActivatedRoute){}
ngOnInit(){
this.route.queryParams.debounceTime(100).subscribe(params=>{
let username=params['username'];
});
}
debounceTime()仅在特定的时间跨度过去而没有另一个源发射后,才从源可观察对象发出一个值
查询和路径(Angular 8)
如果你有像https://myapp.com/owner/123/show?height=23这样的url,那么使用
combineLatest( [this.route.paramMap, this.route.queryParamMap] )
.subscribe( ([pathParams, queryParams]) => {
let ownerId = pathParams.get('ownerId'); // =123
let height = queryParams.get('height'); // =height
// ...
})
更新
如果你使用this.router.navigate([yourUrl]);你的查询参数被嵌入到你的URL字符串中,然后angular对URL进行编码,你会得到类似https://myapp.com/owner/123/show%3Fheight%323的东西——以上解决方案会给出错误的结果(queryParams将为空,如果它在路径端,查询参数可以粘在last path param上)。在这种情况下,改变导航的方式
this.router.navigateByUrl(yourUrl);