我使用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已经非常正确地指出,根据官方文档,组件onDestroy()方法中的unsubscribe()在这种情况下是不必要的。这已从我的代码示例中删除。(请参见本教程中的蓝色警告框)

其他回答

我希望它能帮助到其他人。

上面的问题指出,在页面被重定向后,查询参数值是需要的,我们可以假设快照值(不可观察的替代方案)就足够了。

这里没有人从官方文档中提到snapshot. parmmap .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中,路由模块在import:[]中位于AppRoutingModule(或其他具有根级应用路由的文件)之前。否则将找不到特征路由(因为它们会出现在{path: '**', redirectTo: '/ NOT - FOUND '}之后,并且你只会看到NOT - FOUND消息)。

如果RouterState没有在路由中定义,你就不能从RouterState中获得参数,所以在你的例子中,你必须解析这个querystring…

下面是我使用的代码:

re = /[?&]([^=#&]+)=([^&#]*)/g; 让比赛; let isMatch = true; Let matches = []; while (isMatch) { Match = re.exec(window.location.href); If (match !== null) { match[decodeURIComponent(match[1])] = decodeURIComponent(match[2]); 如果匹配。index === re.lastIndex) { re.lastIndex + +; } } 其他{ isMatch = false; } } console.log(匹配);

你只需要在构造函数中注入ActivatedRoute,然后在它上面访问params或queryParams

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

在某些情况下,它在NgOnInit中不给出任何东西…可能是因为在初始化参数之前调用了init,在这种情况下,你可以通过函数debounceTime(1000)让可观察对象等待一段时间来实现这一点

如= >

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

debounceTime()仅在特定的时间跨度过去而没有另一个源发射后,才从源可观察对象发出一个值

首先,我在使用Angular2时发现,带有查询字符串的url应该是/path;query=value1

在您使用的组件中访问它

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

至于为什么它会在加载组件时被删除,这不是默认行为。我在一个干净的测试项目中特别检查,没有被重定向或更改。它是默认路由还是其他关于路由的特殊的东西?

在https://angular.io/docs/ts/latest/guide/router.html#上阅读关于使用查询字符串和参数进行路由的Angular2教程!#查询参数

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

进口:

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

和功能:

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

注意:并非所有平台都支持它,angular文档似乎还处于“实验性”状态