如何从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") 

Answer 1

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()是不必要的。 这已经从我的代码示例中删除。 （请参阅本教程的“我需要取消订阅”部分）

Answer 2

即使这个问题指定了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提取查询参数的原因是它允许重新使用相同的组件实例，而不是加载新的实例。 每次查询参数被改变时，都会导致一个我们已经订阅的新事件，因此我们可以对相应的更改做出反应。

Answer 3

当像这样的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"]; } } 

Answer 4

我真的很喜欢@ 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 } 

Answer 5

嗨，你可以使用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度文档似乎处于“实验”状态

Answer 6

发送查询参数

 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']; }); 

---

官方来源

Answer 7

首先，我发现与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

Answer 8

如下所示，您可以使用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'])); } } 

Answer 9

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

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

Answer 10

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

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

注意：如果将来要使用参数值， 请移除（1） 。

Answer 11

如果在路由中没有定义路由器，那么你不能从路由器状态获取参数，所以在你的例子中，你必须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); 

Answer 12

在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); }); } }