在我的routable component
我有
@RouteConfig {
{path: '/login', name: 'Login', component: LoginComponent}
}
但是如果我去,我如何获得查询参数app_url/login?token=1234
?
在我的routable component
我有
@RouteConfig {
{path: '/login', name: 'Login', component: LoginComponent}
}
但是如果我去,我如何获得查询参数app_url/login?token=1234
?
RouteParams 现在已弃用,所以这里是如何在新路由器中执行此操作。
this.router.navigate(['/login'],{ queryParams: { token:'1234'}})
然后在登录组件中,您可以采用参数,
constructor(private route: ActivatedRoute) {}
ngOnInit() {
// Capture the token if available
this.sessionId = this.route.queryParams['token']
}
这是文档
为了补充前面的两个答案,Angular2 支持路由中的查询参数和路径变量。在@RouteConfig
定义中,如果您在路径中定义参数,Angular2 会将它们作为路径变量处理,否则作为查询参数处理。
让我们举个例子:
@RouteConfig([
{ path: '/:id', component: DetailsComponent, name: 'Details'}
])
如果你navigate
像这样调用路由器的方法:
this.router.navigate( [
'Details', { id: 'companyId', param1: 'value1'
}]);
您将拥有以下地址:/companyId?param1=value1
. 获取参数的方式对于查询参数和路径变量都是相同的。它们的区别在于,路径变量可以看作是必选参数,查询参数可以看作是可选参数。
希望对你有帮助,蒂埃里
更新:更改路由器 alpha.31 http 查询参数后不再工作(矩阵参数 #2774)。相反,角度路由器使用所谓的矩阵 URL 表示法。
参考https://angular.io/docs/ts/latest/guide/router.html#!#optional-route-parameters:
可选的路由参数不以“?”分隔 和“&”,因为它们将出现在 URL 查询字符串中。它们用分号“;”隔开 这是矩阵 URL 表示法 - 您可能以前从未见过。
好像已经RouteParams
不存在了,取而代之的是ActivatedRoute
。ActivatedRoute
让我们可以访问矩阵 URL 符号参数。如果我们想获取查询字符串?
参数,我们需要使用Router.RouterState
. 在传统的查询字符串PARAMATERS跨路由,这可能不是所希望的结果仍然存在。保留片段现在在路由器 3.0.0-rc.1 中是可选的。
import { Router, ActivatedRoute } from '@angular/router';
@Component ({...})
export class paramaterDemo {
private queryParamaterValue: string;
private matrixParamaterValue: string;
private querySub: any;
private matrixSub: any;
constructor(private router: Router, private route: ActivatedRoute) { }
ngOnInit() {
this.router.routerState.snapshot.queryParams["queryParamaterName"];
this.querySub = this.router.routerState.queryParams.subscribe(queryParams =>
this.queryParamaterValue = queryParams["queryParameterName"];
);
this.route.snapshot.params["matrixParameterName"];
this.route.params.subscribe(matrixParams =>
this.matrixParamterValue = matrixParams["matrixParameterName"];
);
}
ngOnDestroy() {
if (this.querySub) {
this.querySub.unsubscribe();
}
if (this.matrixSub) {
this.matrixSub.unsubscribe();
}
}
}
我们应该能够?
在导航时操纵符号以及;
符号,但我只让矩阵符号起作用。附加到最新路由器文档的plnker显示它应该如下所示。
let sessionId = 123456789;
let navigationExtras = {
queryParams: { 'session_id': sessionId },
fragment: 'anchor'
};
// Navigate to the login page with extras
this.router.navigate(['/login'], navigationExtras);
这对我有用(从 Angular 2.1.0 开始):
constructor(private route: ActivatedRoute) {}
ngOnInit() {
// Capture the token if available
this.sessionId = this.route.snapshot.queryParams['token']
}
(仅限 Childs Route,例如 /hello-world)
如果您想拨打此类电话:
/hello-world?foo=bar&fruit=banana
Angular2 不使用? 也不是&但是; 反而。所以正确的网址应该是:
/hello-world;foo=bar;fruit=banana
并获取这些数据:
import { Router, ActivatedRoute, Params } from '@angular/router';
private foo: string;
private fruit: string;
constructor(
private route: ActivatedRoute,
private router: Router
) {}
ngOnInit() {
this.route.params.forEach((params: Params) => {
this.foo = params['foo'];
this.fruit = params['fruit'];
});
console.log(this.foo, this.fruit); // you should get your parameters here
}