我使用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")
我希望它能帮助到其他人。
上面的问题指出,在页面被重定向后,查询参数值是需要的,我们可以假设快照值(不可观察的替代方案)就足够了。
这里没有人从官方文档中提到snapshot. parmmap .get。
this.route.snapshot.paramMap.get('id')
所以在发送之前,在发送/重定向组件中添加这个:
import { Router } from '@angular/router';
然后重定向(这里有文档):
this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);
或者仅仅是:
this.router.navigate(['/heroes', heroId ]);
确保你已经在你的路由模块中添加了这个,如下所示:
{ path: 'hero/:id', component: HeroDetailComponent }
最后,在需要使用查询参数的组件中
添加导入(此处有文档):
import {Router, ActivatedRoute, ParamMap} from '@angular/ Router ';
注入ActivatedRoute
(文档也导入了switchMap,也注入了Router和HeroService——但它们只在可观察的替代中被需要——当你使用快照替代时就不需要了,就像我们的例子一样):
constructor(
private route: ActivatedRoute
) {}
并得到你需要的值(文档在这里):
ngOnInit () {
const id = this.route.snapshot.paramMap.get('id');
}
注意:如果你将路由模块添加到一个特性模块中(如文档中所示),请确保在app .MODULE.ts中,路由模块在import:[]中位于AppRoutingModule(或其他具有根级应用路由的文件)之前。否则将找不到特征路由(因为它们会出现在{path: '**', redirectTo: '/ NOT - FOUND '}之后,并且你只会看到NOT - FOUND消息)。
尽管这个问题指定的是测试版7,但在谷歌上,这个问题也会出现在常见短语(如angular 2查询参数)的搜索结果的顶部。出于这个原因,这里有一个关于最新路由器的答案(目前是alpha.7)。
读取参数的方式发生了巨大的变化。首先,你需要在构造函数参数中注入名为Router的依赖项,如下所示:
constructor(private router: Router) { }
之后,我们可以订阅我们的ngOnInit方法的查询参数(构造函数也可以,但ngOnInit应该用于可测试性)
this.router
.routerState
.queryParams
.subscribe(params => {
this.selectedId = +params['id'];
});
在这个例子中,我们从URL中读取查询参数id,例如example.com?id=41。
仍然有一些事情需要注意:
访问params['id']这样的params属性总是返回一个字符串,可以通过添加+前缀将其转换为数字。
使用可观察对象获取查询参数的原因是,它允许重用相同的组件实例,而不是加载一个新的组件实例。每次查询参数被更改时,它都会引起一个我们已经订阅的新事件,因此我们可以对更改做出相应的反应。
通过注入ActivatedRoute实例,可以订阅各种可观察对象,包括queryParams和params可观察对象:
import {Router, ActivatedRoute, Params} from '@angular/router';
import {OnInit, Component} from '@angular/core';
@Component({...})
export class MyComponent implements OnInit {
constructor(private activatedRoute: ActivatedRoute) {}
ngOnInit() {
// Note: Below 'queryParams' can be replaced with 'params' depending on your requirements
this.activatedRoute.queryParams.subscribe(params => {
const userId = params['userId'];
console.log(userId);
});
}
}
关于取消订阅的说明
@Reto和@codef0rmer已经非常正确地指出,根据官方文档,组件onDestroy()方法中的unsubscribe()在这种情况下是不必要的。这已从我的代码示例中删除。(请参见本教程中的蓝色警告框)