我使用的是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...
}
}
小心你的路线。“redirectTo”将删除|删除任何查询参数。
const appRoutes: Routes [
{path: "one", component: PageOneComponent},
{path: "two", component: PageTwoComponent},
{path: "", redirectTo: "/one", pathMatch: full},
{path: "**", redirectTo: "/two"}
]
我用查询参数调用主组件，比如“/main?”param1=a¶m2=b，并假设我的查询参数在重定向转发生效之前到达主组件中的“ngOnInit()”方法。
但这是错误的。重定向将出现在前面，删除查询参数并在没有查询参数的情况下调用主组件中的ngOnInit()方法。
我把第三条路线改成了
{path: "", component: PageOneComponent},
现在我的查询参数可以在主要组件ngOnInit和PageOneComponent中访问。
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
}
}
当我在寻找类似的解决方案时偶然发现了这个问题，但我不需要像完整的应用程序级路由或更多导入模块之类的东西。
下面的代码非常适合我使用，不需要额外的模块或导入。
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内部路由的问题，然后其中一些解决了路由参数，这与请求参数不一样。
我猜我的用例与Lars最初的问题类似。
对我来说，用例是推荐跟踪:
Angular运行在mycoolpage.com上，使用散列路由，所以mycoolpage.com会重定向到mycoolpage.com/#/。然而，对于推荐，像mycoolpage.com?referrer=foo这样的链接也应该可用。不幸的是，Angular立即删除了请求参数，直接转到mycoolpage.com/#/。
任何一种使用空组件+ AuthGuard和获得queryParams或queryParamMap的“技巧”，不幸的是，对我不起作用。它们总是空的。
我的解决方案是在index.html中的一个小脚本中处理这个问题，该脚本获得完整的URL和请求参数。然后，我通过字符串操作获得请求参数值，并将其设置在窗口对象上。然后，一个单独的服务处理从窗口对象获取id。
index . html脚本
const paramIndex = window.location.href.indexOf('referrer=');
if (!window.myRef && paramIndex > 0) {
let param = window.location.href.substring(paramIndex);
param = param.split('&')[0];
param = param.substr(param.indexOf('=')+1);
window.myRef = param;
}
服务
declare var window: any;
@Injectable()
export class ReferrerService {
getReferrerId() {
if (window.myRef) {
return window.myRef;
}
return null;
}
}
