如何从angular2从URL获取查询参数?

我使用angular2.0.0-beta.7。 当一个组件加载到像“/ path?query = value1”这样的path上时,它被redirect到“/ path”。 为什么GET参数被删除? 我怎样才能保留参数?

我在路由器中有错误。 如果我有一个主要的路线

@RouteConfig([ { path: '/todos/...', name: 'TodoMain', component: TodoMainComponent } ]) 

和我的孩子路线一样

 @RouteConfig([ { path: '/', component: TodoListComponent, name: 'TodoList', useAsDefault:true }, { path: '/:id', component: TodoDetailComponent, name:'TodoDetail' } ]) 

我不能在TodoListComponent得到参数。

我可以得到matrix

 params("/my/path;param1=value1;param2=value2") 

但我想要经典

 query params("/my/path?param1=value1&param2=value2") 

Angular 2.0最终解决scheme。 似乎RouteParams已经被弃用了。 试试这个:

 import {Router, ActivatedRoute, Params} from '@angular/router'; import {OnInit, Component} from '@angular/core'; @Component({...}) export class MyComponent implements OnInit { constructor(private activatedRoute: ActivatedRoute) {} ngOnInit() { // subscribe to router event this.activatedRoute.params.subscribe((params: Params) => { let userId = params['userId']; console.log(userId); }); } } 

如果您想获取查询参数,请将this.activatedRoute.paramsreplace为this.activatedRoute.queryParams

有关取消订阅的说明

@Reto和@codef0rmer正确地指出,根据官方文档,在这种情况下,组件onDestroy()方法中的unsubscribe()是不必要的。 这已经从我的代码示例中删除。 (请参阅本教程的“我需要取消订阅”部分)

即使这个问题指定了Beta 7版本,这个问题也成为谷歌最常用的search结果,例如angular度2查询参数 。 出于这个原因,这是最新的路由器的答案(目前在alpha.7 )。

参数阅读的方式已经发生了巨大的变化。 首先,您需要在您的构造函数参数中注入名为Router依赖项,如下所示:

 constructor(private router: Router) { } 

之后我们可以订阅我们的ngOnInit方法的查询参数(构造函数也可以,但ngOnInit应该用于可testing性),就像

 this.router .routerState .queryParams .subscribe(params => { this.selectedId = +params['id']; }); 

在这个例子中,我们从URL中读取查询参数id ,例如example.com?id=41

还有几件事情要注意:

  1. params['id']这样的params['id']访问属性总是返回一个string ,并且可以通过用+作为前缀来将其转换为数字
  2. 使用observable提取查询参数的原因是它允许重新使用相同的组件实例,而不是加载新的实例。 每次查询参数被改变时,都会导致一个我们已经订阅的新事件,因此我们可以对相应的更改做出反应。

当像这样的URL http://stackoverflow.com?param1=value

你可以通过代码得到param1:

 import { Component, OnInit } from '@angular/core'; import { Router, ActivatedRoute, Params } from '@angular/router'; @Component({ selector: '', templateUrl: './abc.html', styleUrls: ['./abc.less'] }) export class AbcComponent implements OnInit { constructor(private route: ActivatedRoute) { } ngOnInit() { // get param let param1 = this.route.snapshot.queryParams["param1"]; } } 

我真的很喜欢@ StevePaul的答案,但是我们可以做同样的事情,而不需要额外的订阅/取消订阅。

 import { ActivatedRoute } from '@angular/router'; constructor(private activatedRoute: ActivatedRoute) { let params: any = this.activatedRoute.snapshot.params; console.log(params.id); // or shortcut Type Casting // (<any> this.activatedRoute.snapshot.params).id } 

嗨,你可以使用URLSearchParams,你可以在这里阅读更多关于它。

import:

 import {URLSearchParams} from "@angular/http"; 

和function:

 getParam(){ let params = new URLSearchParams(window.location.search); let someParam = params.get('someParam'); return someParam; } 

注意 :并不是所有平台都支持这个function,而且angular度文档似乎处于“实验”状态

发送查询参数

 import { Router } from '@angular/router'; this.router.navigate([ '/your-route' ], { queryParams: { key: va1, keyN: valN } }); 

接收查询参数

 import { ActivatedRoute } from '@angular/router'; this.activatedRoute.queryParams.subscribe(params => { let value_1 = params['key']; let value_N = params['keyN']; }); 

官方来源

首先,我发现与Angular2合作的是带查询string的url将是/path;query=value1

在你使用的组件中访问它是这样的,但现在是一个代码块:

  constructor(params: RouteParams){ var val = params.get("query"); } 

至于为什么它会被加载组件时被删除,这不是默认行为。 我在一个干净的testing项目中进行了特定的检查,没有被redirect或改变。 这是一个默认的路由或其他东西是特殊的路由?

阅读Angular2教程中有关查询string和参数的路由, url为https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters

如下所示,您可以使用ActivatedRoute在URL中传递查询参数: –

url: – http:/domain.com?test = abc

 import { Component } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'my-home' }) export class HomeComponent { constructor(private sharedServices : SharedService,private route: ActivatedRoute) { route.queryParams.subscribe( data => console.log('queryParams', data['test'])); } } 

获取URL参数作为一个对象。

 import { Router } from '@angular/router'; constructor(private router: Router) { console.log(router.parseUrl(router.url)); } 

如果您只想查询参数一次,最好的办法就是使用take方法,这样您就不用担心取消订阅了。 这里是简单的片段:

 constructor(private route: ActivatedRoute) { route.snapshot.queryParamMap.take(1).subscribe(params => { let category = params.get('category') console.log(category); }) } 

注意:如果将来要使用参数值, 移除(1)

如果在路由中没有定义路由器,那么你不能从路由器状态获取参数,所以在你的例子中,你必须parsing查询string。

这是我使用的代码:

 let re = /[?&]([^=#&]+)=([^&#]*)/g; let match; let isMatch = true; let matches = []; while (isMatch) { match = re.exec(window.location.href); if (match !== null) { matches[decodeURIComponent(match[1])] = decodeURIComponent(match[2]); if (match.index === re.lastIndex) { re.lastIndex++; } } else { isMatch = false; } } console.log(matches); 

在Steve Paul的解决scheme中,我更喜欢避免不必要的ivars,所以为了在ngOnDestroy期间unsubscribe()unsubscribe()调用,只需使用take(1)来订阅observable,并且在第一次预防值内存泄漏

 import 'rxjs/add/operator/take'; import {Router, ActivatedRoute} from '@angular/router'; @Component({...}) export class MyComponent implements OnInit { constructor(private activatedRoute: ActivatedRoute) { this.activatedRoute.params.take(1).subscribe((params: any) => { let userId = params['userId']; console.log(userId); }); } }