如何处理角度2中的查询参数

Question

在我的routable component我

@RouteConfig {
  {path: '/login',   name: 'Login', component: LoginComponent}
}  

但是,如果我去,如何获得查询参数app_url/login?token=1234？

Answer 1

RouteParams现已弃用,所以这里是如何在新路由器中执行此操作.

this.router.navigate(['/login'],{ queryParams: { token:'1234'}})

然后在登录组件中,您可以获取参数,

constructor(private route: ActivatedRoute) {}
ngOnInit() {
    // Capture the token  if available
    this.sessionId = this.route.queryParams['token']

}

这是文档

Answer 2

为了补充前两个答案,Angular2支持路由中的查询参数和路径变量.在@RouteConfig定义中,如果在路径中定义参数,Angular2会将它们作为路径变量处理,如果不是,则将其作为查询参数处理.

我们来看一个例子:

@RouteConfig([
  { path: '/:id', component: DetailsComponent, name: 'Details'}
])

如果你这样调用navigate路由器的方法:

this.router.navigate( [
  'Details', { id: 'companyId', param1: 'value1'
}]);

您将拥有以下地址:/companyId?param1=value1.获取参数的方法对于查询参数和路径变量都是相同的.它们之间的区别在于路径变量可以看作是必需参数,查询参数可以看作是可选参数.

希望它对你有帮助,蒂埃里

更新:路由器alpha.31更改后,http查询参数不再有效(Matrix params#2774).相反,角度路由器使用所谓的Matrix URL表示法.

参考https://angular.io/docs/ts/latest/guide/router.html#!#optional-route-parameters:

可选的路由参数不以"？"分隔 和"&",因为它们将在URL查询字符串中.它们用分号分隔";" 这是矩阵URL表示法 - 您可能以前从未见过的.

Answer 3

似乎RouteParams不再存在,并被替换为ActivatedRoute.ActivatedRoute让我们访问矩阵URL表示法参数.如果我们想要获取查询字符串?参数,我们需要使用Router.RouterState.在传统的查询字符串PARAMATERS跨路由持久,这可能不是所期望的结果.现在,在路由器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();
    }
  }
}

我们应该能够操纵?导航时的符号以及;符号,但我只能使矩阵表示法工作.连接到最新路由器文档的plnker显示它应该如下所示.

let sessionId = 123456789;
let navigationExtras = {
  queryParams: { 'session_id': sessionId },
  fragment: 'anchor'
};

// Navigate to the login page with extras
this.router.navigate(['/login'], navigationExtras);

Answer 4

这对我有用(从Angular 2.1.0开始):

constructor(private route: ActivatedRoute) {}
ngOnInit() {
  // Capture the token  if available
  this.sessionId = this.route.snapshot.queryParams['token']

}

Answer 5

（仅适用于儿童路线，例如/ hello-world）

在这种情况下，您想拨打这种电话：

/ hello-world？foo = bar＆fruit = banana

Angular2不使用？也不＆但; 代替。因此正确的网址应为：

/ hello-world; foo = bar; fruit = banana

并获取这些数据：

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

Answer 6

Angular2 v2.1.0（稳定）：

ActivatedRoute提供了一个可以观察的订阅。

  constructor(
     private route: ActivatedRoute
  ) { }

  this.route.params.subscribe(params => {
     let value = params[key];
  });

每当路由更新时，这也会触发：/ home / files / 123-> / home / files / 321