如何处理angular2中的查询参数
在我的routable component中
@RouteConfig { {path: '/login', name: 'Login', component: LoginComponent} }
但是，如果我去app_url/login?token=1234我怎么得到查询参数？
为了补充前面两个答案，Angular2同时支持路由中的查询参数和pathvariables。 在@RouteConfig定义中，如果你在一个path中定义了参数，Angular2将它们作为pathvariables处理，如果不是，则作为查询参数处理。
我们来看一个例子：
@RouteConfig([ { path: '/:id', component: DetailsComponent, name: 'Details'} ])
如果你这样调用路由器的navigate方法：
this.router.navigate( [ 'Details', { id: 'companyId', param1: 'value1' }]);
您将拥有以下地址： /companyId?param1=value1 。 获取参数的方式对于查询参数和pathvariables都是相同的。 它们之间的区别在于，pathvariables可以被视为必需参数和查询参数作为可选参数。
希望它能帮助你，Thierry
更新：在路由器alpha.31 http查询params更改后不再工作（ matrix参数＃2774 ）。 相反，angular度路由器使用所谓的matrixURL表示法。
参考https://angular.io/docs/ts/latest/guide/router.html#!#optional-route-parameters ：
可选的路由参数不能用“？”分开 和“＆”，因为它们将在URL查询string中。 它们用分号隔开“;” 这是matrix的URL表示法 – 您以前可能没有看到过。
RouteParams现在被折旧，所以这里是如何在新的路由器中做到这一点。
this.router.navigate(['/login'],{ queryParams: { token:'1234'}})
然后在login组件中可以取参数，
constructor(private route: ActivatedRoute) {} ngOnInit() { // Capture the token if available this.sessionId = this.route.queryParams['token'] }
这里是文档
似乎RouteParams不再存在，并由ActivatedRoute取代。 ActivatedRoute使我们可以访问matrixURL表示法参数。 如果我们想要查询string? 我们需要使用Router.RouterState参数。 传统的查询string参数在路由中被持久化，这可能不是所期望的结果。 在路由器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(); } } }
我们应该可以操纵? 航行时的记号，以及 符号，但我只是得到了matrix符号工作呢。 连接到最新的路由器文档的蠕虫显示它应该看起来像这样。
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'] }
（仅适用于儿童路线，例如/ hello-world）
在这种情况下，您想进行这种呼叫：
/你好世界？富=酒吧和水果=香蕉
Angular2不使用？ 也不是 代替。 所以正确的URL应该是：
/你好世界;富=酒吧;水果=香蕉
并获得这些数据：
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 }
来源： https ： //angular.io/docs/ts/latest/guide/router.html
Angular2 v2.1.0 （稳定）：
ActivatedRoute提供了一个可观察的订阅。
constructor( private route: ActivatedRoute ) { } this.route.params.subscribe(params => { let value = params[key]; });
每当路由得到更新时，都会触发：/ home / files / 123 – > / home / files / 321
angular度4：
我已经在下面包括JS（用于OG）和TS版本。
html的
<a [routerLink]="['/search', { tag: 'fish' } ]">A link</a>
在上面我使用链接参数数组请参阅下面的来源获取更多信息。
routing.js
(function(app) { app.routing = ng.router.RouterModule.forRoot([ { path: '', component: indexComponent }, { path: 'search', component: searchComponent } ]); })(window.app || (window.app = {}));
searchComponent.js
(function(app) { app.searchComponent = ng.core.Component({ selector: 'search', templateUrl: 'view/search.html' }) .Class({ constructor: [ ng.router.Router, ng.router.ActivatedRoute, function(router, activatedRoute) { // Pull out the params with activatedRoute... console.log(' params', activatedRoute.snapshot.params); // Object {tag: "fish"} }] } }); })(window.app || (window.app = {}));
routing.ts（摘录）
const appRoutes: Routes = [ { path: '', component: IndexComponent }, { path: 'search', component: SearchComponent } ]; @NgModule({ imports: [ RouterModule.forRoot(appRoutes) // other imports here ], ... }) export class AppModule { }
searchComponent.ts
import 'rxjs/add/operator/switchMap'; import { OnInit } from '@angular/core'; import { Router, ActivatedRoute, Params } from '@angular/router'; export class SearchComponent implements OnInit { constructor( private route: ActivatedRoute, private router: Router ) {} ngOnInit() { this.route.params .switchMap((params: Params) => doSomething(params['tag'])) }
更多信息：
“链接参数数组” https://angular.io/docs/ts/latest/guide/router.html#!#link-parameters-array
“激活的路线 – 路线信息的一站式服务” https://angular.io/docs/ts/latest/guide/router.html#!#activated-route
根据Angular2文档，你应该使用：
@RouteConfig([ {path: '/login/:token', name: 'Login', component: LoginComponent}, ]) @Component({ template: 'login: {{token}}' }) class LoginComponent{ token: string; constructor(params: RouteParams) { this.token = params.get('token'); } }
对于angular4
url：
http://example.com/company/100
路由器path：
const routes: Routes = [ { path: 'company/:companyId', component: CompanyDetailsComponent}, ]
零件：
@Component({ selector: 'company-details', templateUrl: './company.details.component.html', styleUrls: ['./company.component.css'] }) export class CompanyDetailsComponent{ companyId: string; constructor(private router: Router, private route: ActivatedRoute) { this.route.params.subscribe(params => { this.companyId = params.companyId; console.log('companyId :'+this.companyId); }); } }
控制台输出：
companyId：100
