我使用的是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的最新版本中，其他答案中建议你可以使用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']
}
}
}
不幸的是，最干净的解决方案并不是最可扩展的解决方案。在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']
}
}
}
当我在寻找类似的解决方案时偶然发现了这个问题，但我不需要像完整的应用程序级路由或更多导入模块之类的东西。
下面的代码非常适合我使用，不需要额外的模块或导入。
GetParam(name){
const results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
if(!results){
return 0;
}
return results[1] || 0;
}
PrintParams() {
console.log('param1 = ' + this.GetParam('param1'));
console.log('param2 = ' + this.GetParam('param2'));
}
http://localhost: 4200 / ? param1 = hello¶m2 = 123输出:
param1 = hello
param2 = 123
查询和路径参数(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);
