Question

再次需要帮助！

我正在使用Angular 4，并希望从我的组件中的url获取参数。网址为“http://myhost/index?user=James&token=123&picture=3456abc.png”或“http://myhost/index?user=Peter”

我试过这些不同的方法，但没有运气。

如何获取网址参数'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 + "]");
  }

---已解决-----------------------------

我尝试过activateRoute方法，但没有奏效。最后，我回到了Rach的基本建议。它现在有效。我尝试解析的url不是来自route.navigate。它是我服务器的重定向。不确定是否重要。

获得的经验教训：有时候，回到基础是好的，即简单地通过＆amp;解析location.href字符串。和=获取参数。

Answer 1

首先，在ActivatedRoute

中设置constructor

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); 
};

Answer 2

如果你想使用查询参数而不是在路由中定义它们，可以在构造函数中引用ActivatedRoute并订阅queryParams。

constructor(private route: ActivatedRoute) {
    this.route
      .queryParams
      .subscribe(params => {
          // here you can access params['user'], params['token'], etc.
      });
}

Answer 3

使用ActivatedRoute快照，如下例所示。

this.userName = this.activatedRoute.snapshot.params['user'];
this.userToken = this.activatedRoute.snapshot.params['token'];
this.userPicture = this.activatedRoute.snapshot.params['picture'];

Answer 4

仔细检查以确保您正确定义了路线。

在你的路线定义中你应该有这样的东西：

path: ':user/:id/:token/:picture'

Answer 5

以角度4获取url参数，例如：http://localhost/doctor?test=1

import {Component} from '@angular/core';
import {Router} from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: './app.home.html',
})

export class HomeComponant {
title = 'Home';


constructor(

    private router: Router,

) {}

onSubmit() {
  this.router.navigate(['/doctor'],{queryParams:{test:1}});
}

}

Answer 6

想知道所有网址参数吗？

constructor(private activatedRoute: ActivatedRoute) {
    this.activatedRoute.params.subscribe((params: Params) => {
       console.log(params)
    })
}

在子路由中，您需要使用parent来获取父路由参数

this.activatedRoute.parent.params.subscribe((params: Params) => {
    console.log(params)
})

angular 4如何获取url参数

6 个答案:

修饰的