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

当前回答

当你有一个空路由对象时,这主要是因为你没有在app.component.html中使用路由器出口。

如果没有这个,你将无法获得一个有意义的非空子对象的路由对象,特别是params和queryParams。

尝试添加<router-outlet><router-outlet> < app-main-component > < / app-main-component >

在此之前,确保你在App -routing >中准备好了查询参数,它导出了App组件使用的类Route:

param: '/param/:dynamicParam', path: MyMainComponent

当然,最后一件事,为了获得你的参数,我个人使用this.route.snapshot.params.dynamicParam,其中dynamicParam是在你的app-routing组件中使用的名称:)

其他回答

当你有一个空路由对象时,这主要是因为你没有在app.component.html中使用路由器出口。

如果没有这个,你将无法获得一个有意义的非空子对象的路由对象,特别是params和queryParams。

尝试添加<router-outlet><router-outlet> < app-main-component > < / app-main-component >

在此之前,确保你在App -routing >中准备好了查询参数,它导出了App组件使用的类Route:

param: '/param/:dynamicParam', path: MyMainComponent

当然,最后一件事,为了获得你的参数,我个人使用this.route.snapshot.params.dynamicParam,其中dynamicParam是在你的app-routing组件中使用的名称:)

查询和路径参数(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);

在Angular 5中,查询参数是通过订阅this.route.queryParams来访问的(注意,后面的Angular版本推荐queryParamMap,也可以查看其他答案)。

例如:/应用程序吗?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;
}

我知道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指出这一点。

你也可以使用HttpParams,比如:

  getParamValueQueryString( paramName ) {
    const url = window.location.href;
    let paramValue;
    if (url.includes('?')) {
      const httpParams = new HttpParams({ fromString: url.split('?')[1] });
      paramValue = httpParams.get(paramName);
    }
    return paramValue;
  }