如何从Angular 5中的URL获取查询参数? [英] How to get query parameters from URL in Angular 5?

问题描述

我正在使用angular 5.0.3，我想使用诸如/app?param1=hallo&param2=123之类的查询参数来启动我的应用程序. 在Angular 2中如何从url获取查询参数?对我不起作用.

I'm using angular 5.0.3, I would like to start my application with a bunch of query parameters like /app?param1=hallo&param2=123. Every tip given in How to get query params from url in Angular 2? does not work for me.

有什么想法可以使查询参数起作用吗?

Any ideas how to get query parameters work?

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

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

This private function helps me to get my parameters, but I don't think it is the right way in new Angular environment.

[更新:] 我的主应用看起来像

[update:] My main app looks like

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

  constructor(private route: ActivatedRoute) {}

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

推荐答案

在Angular 5中，通过订阅this.route.queryParams可以访问查询参数.

In Angular 5, the query params are accessed by subscribing to this.route.queryParams.

示例:/app?param1=hallo&param2=123

param1: string;
param2: string;
constructor(private route: ActivatedRoute) {
    console.log('Called Constructor');
    this.route.queryParams.subscribe(params => {
        this.param1 = params['param1'];
        this.param2 = params['param2'];
    });
}

而this.route.snapshot.params

示例:/param1/:param1/param2/:param2

param1: string;
param2: string;
constructor(private route: ActivatedRoute) {
    this.param1 = this.route.snapshot.params.param1;
    this.param2 = this.route.snapshot.params.param2;
}

这篇关于如何从Angular 5中的URL获取查询参数?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！