我使用的是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...
  }
}

当前回答

这对我很管用。我已经在路由模块中使用了子路由。


 this.route.firstChild.snapshot.paramMap.get('id');
   

其他回答

如果你没有使用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

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
    }
}

我认为是Angular 8:

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

不幸的是,最干净的解决方案并不是最可扩展的解决方案。在Angular的最新版本中,其他答案中建议你可以使用ActivatedRoute injectable,特别是使用snapshot属性,轻松获取查询参数:

this.route.snapshot.queryParamMap.get('param')

或者订阅属性(在查询字符串会更新的情况下使用,例如通过用户id导航):

this.route.queryParamMap.subscribe(params => console.log(params));

我在这里告诉你,这些解决方案有一个巨大的缺陷,一段时间没有得到解决:https://github.com/angular/angular/issues/12157

总而言之,唯一的防弹解决方案是使用优秀的老香草javascript。在本例中,我为URL操作创建了一个服务:

import { Injectable } from '@angular/core';
import { IUrl } from './iurl';

@Injectable()
export class UrlService {
    static parseQuery(url: string): IUrl {
        const query = url.slice(url.indexOf('?')+1).split('&').reduce( (acc,query) => {
            const parts = query.split('=');
            acc[parts[0]] = parts[1];
            return acc;
        }, {});

        return {
            a: query['a'],
            b: query['b'],
            c: query['c'],
            d: query['d'],
            e: query['e']
        }
    }
}

最好的解决方案是使用ActivatedRoute:

    constructor(private route: ActivatedRoute) {}
    
    ngOnInit(): void {
        this.route.queryParams.subscribe((params) => {
         console.log(params);
         const queryparams = params['queryName'];
        });
    }