如何处理angular 2中的查询参数

IT技术 javascript jquery angular angular2-routing
2021-02-06 18:37:06

在我的routable component我有

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

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

6个回答

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

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

然后在登录组件中,您可以采用参数,

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

}

是文档

除此之外,现在(目前,angular 5)似乎您需要引用快照,如果您正在阅读本文,请确保包含 .snapshot.queryParams 以节省时间并在此处阅读angular.io/guide/router#! #optional-route-parameters感谢@LyleRolleman 指出这一点
2021-03-15 18:37:06
为了让它工作,我不得不做这个.route.snapshot.queryParams ...
2021-03-21 18:37:06

为了补充前面的两个答案,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 查询参数后不再工作(矩阵参数 #2774)。相反,角度路由器使用所谓的矩阵 URL 表示法。

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

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

我找了好几个小时!但它不是那样工作的,URL 应该是这样的/companyId;param1=value1;param2=value2无论如何,感谢您以正确的方式指出我,如果我是对的,您可以更新您的答案。
2021-03-16 18:37:06
路由器的最新文档说:“查询字符串参数不再以“?”和“&”分隔。它们以分号 (;) 分隔,这是矩阵 URL 表示法...”
2021-03-19 18:37:06
为什么他们使用矩阵 URL 表示法以及如何切换回来。这会在发送包含 /、+ 和 = 符号的参数时产生问题
2021-04-03 18:37:06
我讨厌投反对票,但这个优秀的答案需要更新。
2021-04-04 18:37:06
我同意 Silcener。这 ?不起作用,我也必须使用分号。
2021-04-13 18:37:06

好像已经RouteParams不存在了,取而代之的是ActivatedRouteActivatedRoute让我们可以访问矩阵 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);
嗨,斯蒂芬,“传统的查询字符串参数在路由中保持不变”是什么意思,您能给我们举一些例子吗?我没有明白我也阅读了文档,但我仍然在努力解决这个问题。
2021-03-25 18:37:06
假设你通过 http:/someurl/a-route?do-thing=delete-variable 导航到你的页面,然后通过 this.router.navigate(['/login']) 导航你最终会在 http:/someurl/ login?do-thing=set-variable。如果你做了 http:/someurl/a-route;do-thing=set-variable 然后导航你最终在 http:/someurl/login
2021-03-25 18:37:06
类型“YourComponent”上不存在属性“路由器”
2021-03-29 18:37:06
由于这个答案,让传统的查询参数起作用。矩阵表示法在 Hotmail 中存在问题。如果您需要向用户发送激活链接(带参数),Hotmail 将对分号进行编码,从而破坏 URL。
2021-04-02 18:37:06
3.0.0-rc.1 (2016-08-09) “默认不再保留查询参数和片段” github.com/angular/angular/blob/master/modules/@angular/router/...
2021-04-12 18:37:06

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

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

}
在我看来,这个答案上面的所有答案都是错误的。这是正确的。
2021-03-29 18:37:06

(仅限 Childs Route,例如 /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

我尝试像这样运行它,并在执行 npm start 时得到以下信息: aot/app/app.component.ngfactory.ts(45,30): error TS2346: Supplied parameters do not match any signature of call target。
2021-04-02 18:37:06
Angular2 使用;(矩阵参数语法)作为子路由?的查询参数和根路由的查询参数。
2021-04-06 18:37:06