在Angular 5中如何从URL中获取查询参数?

我使用的是angular 5.0.3，我想用一堆查询参数启动我的应用程序，比如/app?param1=hallo&param2=123。如何在Angular 2中从url中获取查询参数?对我没用。

有什么想法如何获得查询参数工作?

private getQueryParameter(key: string): string {
  const parameters = new URLSearchParams(window.location.search);
  return parameters.get(key);
}

这个私有函数帮助我获取参数，但我认为在新的Angular环境中这不是正确的方式。

(更新:) 我的主应用程序是这样的

@Component({...})
export class AppComponent implements OnInit {

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    // would like to get query parameters here...
    // this.route...
  }
}

当前回答

如果你没有使用Angular的router try, querystring。安装它

npm install --save querystring

对你的项目。在您的组件中执行如下操作

import * as qs from 'querystring';
...
ngOnInit() {
   const params = qs.parse(window.location.search.substring(1));
   ...
}

子字符串(1)是必要的，因为如果你有这样的'/mypage?Foo =bar'则键名为? Foo

2018-09-29 01:33:30

其他回答

当我在寻找类似的解决方案时偶然发现了这个问题，但我不需要像完整的应用程序级路由或更多导入模块之类的东西。

下面的代码非常适合我使用，不需要额外的模块或导入。

  GetParam(name){
    const results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    if(!results){
      return 0;
    }
    return results[1] || 0;
  }

  PrintParams() {
    console.log('param1 = ' + this.GetParam('param1'));
    console.log('param2 = ' + this.GetParam('param2'));
  }

http://localhost: 4200 / ? param1 = hello&param2 = 123输出:

param1 = hello
param2 = 123

2018-05-03 16:51:31

我认为是Angular 8:

ActivatedRoute。params已被ActivatedRoute.paramMap取代 ActivatedRoute。queryParams已被ActivatedRoute.queryParamMap取代

2020-04-20 11:43:31

Angular路由器提供了parseUrl(url: string)方法，用于将url解析为UrlTree。UrlTree的一个属性是queryParams。所以你可以这样做:

this.router.parseUrl(this.router.url).queryParams[key] || '';

2020-05-23 17:44:01

查询和路径参数(Angular 8)

url，如https://myapp.com/user/666/read?age=23使用

import { combineLatest } from 'rxjs';
// ...

combineLatest( [this.route.paramMap, this.route.queryParamMap] )
  .subscribe( ([pathParams, queryParams]) => {
    let userId = pathParams.get('userId');    // =666
    let age    = queryParams.get('age');      // =23
    // ...
  })

更新

如果你使用this.router.navigate([someUrl]);你的查询参数被嵌入到someUrl字符串中，然后angular对URL进行编码，你会得到类似https://myapp.com/user/666/read%3Fage%323的东西——以上解决方案会给出错误的结果(queryParams将为空，路径参数可以粘在最后一个路径参数上，如果它在路径端)。在这种情况下，改变导航的方式

this.router.navigateByUrl(someUrl);

2020-04-06 18:48:41

import { ParamMap, Router, ActivatedRoute } from '@angular/router';

constructor(private route: ActivatedRoute) {}

ngOnInit() {
    console.log(this.route.snapshot.queryParamMap);
}

更新

import { Router, RouterStateSnapshot } from '@angular/router';

export class LoginComponent {
    constructor(private router: Router) {
        const snapshot: RouterStateSnapshot = router.routerState.snapshot;
        console.log(snapshot);  // <-- hope it helps
    }
}

2017-11-23 12:52:42

在Angular 5中如何从URL中获取查询参数?

推荐文章

最新文章

标签