我使用的是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 5中,查询参数是通过订阅this.route.queryParams来访问的(注意,后面的Angular版本推荐queryParamMap,也可以查看其他答案)。
例如:/应用程序吗?param1 = hallo¶m2 = 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的最新版本中,其他答案中建议你可以使用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']
}
}
}
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
}
}