我使用的是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 8:

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

其他回答

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

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

它对我的作用是:

constructor(private route: ActivatedRoute) {}

ngOnInit()
{
    this.route.queryParams.subscribe(map => map);
    this.route.snapshot.queryParams; 
}

如何在angular2中从url获取查询参数?

简单的解决方案

 // in routing file
       {
            path: 'checkout/:cartId/:addressId',
            loadChildren: () => import('./pages/checkout/checkout.module').then(m => m.CheckoutPageModule)
          },

    // in Component file

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

                 constructor(
                      private _Router: ActivatedRoute
                  ) { }

                  ngOnInit() {
                    this.cartId = this._Router.snapshot.params.cartId;
                    this.addressId = this._Router.snapshot.params.addressId;
                    console.log(this.addressId, "addressId")
                    console.log(this.cartId, "cartId")
                  }

我知道OP要求的是Angular 5的解决方案,但对于所有在更新的(6+)Angular版本中偶然遇到这个问题的人来说。引用文档,关于ActivatedRoute。queryParams(大多数其他答案都基于queryParams):

两处较老的房产仍在出售。他们的能力不如 它们的替代品是不鼓励的,将来可能会被弃用 角的版本。 params -一个包含required和optional的Observable 指定路由的参数。请改用paramMap。 queryParams -一个包含可用查询参数的可观察对象 所有路线。请改用queryParamMap。

根据文档,获取查询参数的简单方法是这样的:

constructor(private route: ActivatedRoute) { }

ngOnInit() {
    this.param1 = this.route.snapshot.paramMap.get('param1');
    this.param2 = this.route.snapshot.paramMap.get('param2');
}

要了解更高级的方法(例如,高级组件重用),请参阅本文档章节。

编辑:

正如下面评论中正确指出的那样,这个答案是错误的——至少对于OP指定的情况是如此。

OP请求获取全局查询参数(/app?param1=hallo&param2=123);在这种情况下,您应该使用queryParamMap(就像@dapperdan1985 answer一样)。

另一方面,paramMap用于特定于路由的参数(例如/app/:param1/:param2,导致/app/hallo/123)。

感谢@JasonRoyle和@daka指出这一点。

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