如何从Angular 2中的url获取查询参数？

我使用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&param2=value2")

通过注入一个实例，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正确地指出，根据官方文档，在这种情况下，不需要在unsubscribe()components onDestroy()方法内部。这已从我的代码示例中删除。（见蓝色警告框这个教程中的）

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

即使该问题指定了beta 7版本，该问题也将作为Google上针对诸如angular 2查询参数之类的常用短语的搜索结果而出现。因此，这是最新路由器的答案（当前在alpha.7中）。

读取参数的方式发生了巨大变化。首先，您需要注入Router在构造函数参数中调用的依赖项，例如：

constructor(private router: Router) { }

然后我们可以在我们的ngOnInit方法上订阅查询参数（构造函数也可以，但是ngOnInit应该用于可测试性），例如

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

在此示例中，我们从类似的URL中读取查询参数IDexample.com?id=41。

还有几件事要注意：

1. 存取paramslike之类的属性params['id']总是返回一个字符串，可以通过在字符串前面加上前缀将其转换为数字+。
2. 以可观察的方式获取查询参数的原因是，它允许重新使用相同的组件实例，而不是加载新的实例。每次更改查询参数时，都会引起一个我们已订阅的新事件，因此我们可以对更改做出相应的反应。

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

发送查询参数

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

官方资料

嗨，您可以使用URLSearchParams，您可以在此处了解更多信息。

进口：

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

和功能：

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

注意：并非所有平台都支持它，并且由角度文档似乎处于“ EXPERIMENTAL”状态

首先，我发现使用Angular2的原因是带有查询字符串的url为 /path;query=value1

要在组件中访问它，请使用，这样，但是现在遵循一个代码块：

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

至于为什么在加载组件时将其删除，这不是默认行为。我专门在一个干净的测试项目中进行了检查，但没有重定向或更改。它是默认路由还是其他关于路由的特殊功能？

在Angular2教程中了解有关使用查询字符串和参数进行路由的信息，网址为https://angular.io/docs/ts/latest/guide/router.html#!#query-parameters

您可以使用ActivatedRoute在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);
  })
}

注意：如果以后要使用参数值，请删除take（1）。

现在它是：

this.activatedRoute.queryParams.subscribe((params: Params) => {
  console.log(params);
});

我希望它会帮助别人。

上面的问题指出，页面重定向后需要查询参数值，并且我们可以假定快照值（不可观察的替代方案）就足够了。

这里没有人提到官方文档中有关snapshot.paramMap.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中将路由模块引入IMPORTS中的AppRoutingModule（或其他具有根级应用程序路由的文件）之前：[]。否则将找不到其他功能路由（因为它们将在{path：'**'，redirectTo：'/ not-found'}之后出现，并且您只会看到未找到的消息）。

您只需要在构造函数中注入ActivatedRoute，然后通过它访问params或queryParams

constructor(private route:ActivatedRoute){}
ngOnInit(){
        this.route.queryParams.subscribe(params=>{
        let username=params['username'];
      });
 }

在某些情况下，它在NgOnInit中不提供任何信息...可能是由于在初始化参数之前进行了init调用，在这种情况下，您可以通过使用函数debounceTime（1000）要求observable等待一段时间来实现此目的

例如=>

 constructor(private route:ActivatedRoute){}
    ngOnInit(){
            this.route.queryParams.debounceTime(100).subscribe(params=>{
            let username=params['username'];
          });
     }

debounceTime（）仅在经过特定的时间间隔后才发出可观察到的源值，而没有其他源发出

如果未在路由中定义参数，则无法从RouterState获取参数，因此在您的示例中，您必须解析查询字符串...

这是我使用的代码：

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

查询和路径（角度8）

如果您有类似https://myapp.com/owner/123/show?height=23的网址，请使用

combineLatest( [this.route.paramMap, this.route.queryParamMap] )
  .subscribe( ([pathParams, queryParams]) => {
    let ownerId = pathParams.get('ownerId');    // =123
    let height  = queryParams.get('height');    // =height
    // ...
  })

更新

如果您使用this.router.navigate([yourUrl]);并且查询参数嵌入yourUrl字符串中，则angular对URL进行编码，并且得到类似https://myapp.com/owner/123/show%3Fheight%323的内容 -上述解决方案将产生错误的结果（ queryParams将为空，并且查询参数可以粘贴到最后一个路径参数（如果它在路径末端）。在这种情况下，将导航方式更改为此

this.router.navigateByUrl(yourUrl);