angular 4如何获取url参数
angular 4如何获取url参数
提问于 2017-11-03 09:53:22
再次需要帮助！
我使用的是Angular 4，我想从我的组件中的一个url中获取参数。URL为"http://myhost/index?user=James&token=123&picture=3456abc.png“或"http://myhost/index?user=Peter”
我尝试了这些不同的方法，但没有成功。
如何获取url参数'user'，'token‘和'picture'？
import { Routes, RouterModule, Router, ActivatedRoute, RouteSegment, Params, ROUTER_DIRECTIVES } from '@angular/router';
constructor(private restSvc: RestSvc, private router: Router, private domSanitizer: DomSanitizer,
private mdIconRegistry: MdIconRegistry, private activatedRoute: ActivatedRoute, private routeSegment: RouteSegment) {
// Method 1: subscribe to queryParamMap - not working - all values are undefined
/* this.activatedRoute.queryParamMap.subscribe(params => {
this.userName = params['user'];
this.userToken = params['token'];
this.userPicture = params['picture'];
}) */
// Method 2: use the $location service - not working
//var params = $location.search('user', 'token', 'picture'); //syntax error - cannot find name $location
// Method 3: RouteSegment
this.userName = routeSegment.getParam('user'); // Error: compile eror - has no exported member 'RouteSegment'.
console.log("App Component Constructor - params user [" + this.userName + "]");
}-已解决
我尝试过activatedRoute方法，但不起作用。最后，我回到Rach建议的基础上。它现在起作用了。我试图解析的url不是来自route.navigate。它是从我的服务器重定向的。我不确定这是否重要。
学到的教训:有时候，回到基本的东西是很好的，例如，简单地通过&和=来解析location.href字符串来获得参数。
回答 6
Stack Overflow用户
回答已采纳
发布于 2017-11-03 10:15:08
首先，在constructor中设置ActivatedRoute
constructor(private route: ActivatedRoute){}
public user:your_type;其次，将此代码放入构造函数回调中：
this.route.params.subscribe(params => { this.user = params['user']; });如果您使用以下代码重定向，则此方法将起作用：
this.router.navigate(['./yourlocation', { user: this.user }]);已修改
Angular Url结构是不使用&的a/:paras1/:paras2或a?a=3;。
如果您使用&来分隔参数，建议使用nativeJS来获取。
constructor(){
this.user = this.getUrlParameter('user');
}
public user;
private getUrlParameter(sParam) {
return decodeURIComponent(window.location.search.substring(1)).split('&')
.map((v) => { return v.split("=") })
.filter((v) => { return (v[0] === sParam) ? true : false })
.reduce((prev, curv, index, array) => { return curv[1]; }, undefined);
};Stack Overflow用户
发布于 2017-11-03 10:07:01
如果您想使用查询参数而不是在路由中定义它们，您可以在构造函数中引用ActivatedRoute并订阅queryParams。
constructor(private route: ActivatedRoute) {
this.route
.queryParams
.subscribe(params => {
// here you can access params['user'], params['token'], etc.
});
}Stack Overflow用户
发布于 2017-11-03 10:01:15
使用ActivatedRoute快照，如下例所示。
this.userName = this.activatedRoute.snapshot.params['user'];
this.userToken = this.activatedRoute.snapshot.params['token'];
this.userPicture = this.activatedRoute.snapshot.params['picture'];页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47087285
复制相关文章
相似问题
腾讯云开发者
