我使用的是angular 5.0.3,我想用一堆查询参数启动我的应用程序,比如/app?param1=hallo¶m2=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)
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);
父组件从ActivatedRoute获取空参数
对我有用:
import {Component, OnDestroy, OnInit} from '@angular/core';
import { Router, ActivatedRoute, Params, RoutesRecognized } from '@angular/router';
@Component({
selector: 'app-navigation-bar',
templateUrl: './navigation-bar.component.html',
styleUrls: ['./navigation-bar.component.scss']
})
export class NavigationBarComponent implements OnInit, OnDestroy {
private sub: any;
constructor(private route: ActivatedRoute, private router: Router) {}
ngOnInit() {
this.sub = this.router.events.subscribe(val => {
if (val instanceof RoutesRecognized) {
console.log(val.state.root.firstChild.params);
}
});
}
ngOnDestroy() {
this.sub.unsubscribe();
}
}
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
}
}
我知道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¶m2=123);在这种情况下,您应该使用queryParamMap(就像@dapperdan1985 answer一样)。
另一方面,paramMap用于特定于路由的参数(例如/app/:param1/:param2,导致/app/hallo/123)。
感谢@JasonRoyle和@daka指出这一点。