Comment obtenir des params de requête à partir de l'url en angular 2?

quand une URL comme celle-ci http://stackoverflow.com?param1=value

vous pouvez obtenir le param1 par code suivre:

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute, Params } from '@angular/router';

@Component({
    selector: '',
    templateUrl: './abc.html',
    styleUrls: ['./abc.less']
})
export class AbcComponent implements OnInit {
    constructor(private route: ActivatedRoute) { }

    ngOnInit() {
        // get param
        let param1 = this.route.snapshot.queryParams["param1"];
    }
}

bien que la question spécifie la version beta 7 , cette question apparaît également comme le résultat de recherche haut sur Google pour les phrases communes comme angular 2 query parameters . Pour cette raison voici une réponse pour le routeur le plus récent (actuellement en alpha.7 ).

la façon dont les params sont lus a radicalement changé. Tout d'abord, vous devez injecter la dépendance appelée Router dans votre constructeur. paramètres comme:

constructor(private router: Router) { }

et après cela nous pouvons nous abonner pour les paramètres de requête sur notre méthode ngOnInit (le constructeur est ok aussi, mais ngOnInit doit être utilisé pour la testabilité) comme

this.router
  .routerState
  .queryParams
  .subscribe(params => {
    this.selectedId = +params['id'];
  });

dans cet exemple, nous lisons la requête param id de L'URL comme example.com?id=41 .

il y a encore peu de choses à remarquer:

1. accès à la propriété de params comme params['id'] renvoie toujours une chaîne , et cela peut être converti en numéro en le préfixant avec + .
2. la raison pour laquelle les params de requête sont récupérées avec observable est qu'elle permet de réutiliser la même instance de composant au lieu d'en charger une nouvelle. Chaque fois query param est modifié, il causera un nouvel événement pour lequel nous avons souscrit et nous pouvons donc réagir sur les changements en conséquence.

j'ai vraiment aimé la réponse de @StevePaul mais nous pouvons faire la même chose sans appel superflu d'abonnement/désabonnement.

import { ActivatedRoute } from '@angular/router';
constructor(private activatedRoute: ActivatedRoute) {
    let params: any = this.activatedRoute.snapshot.params;
    console.log(params.id);
    // or shortcut Type Casting
    // (<any> this.activatedRoute.snapshot.params).id
}

pour envoyer des params d'interrogation

import { Router } from '@angular/router';
this.router.navigate([ '/your-route' ], { queryParams: { key: va1, keyN: valN } });

Pour recevoir des requêtes params

import { ActivatedRoute } from '@angular/router';
this.activatedRoute.queryParams.subscribe(params => {
    let value_1 = params['key'];
    let value_N = params['keyN'];
});

source officielle

Bonjour vous pouvez utiliser URLSearchParams, vous pouvez en savoir plus sur it ici .

importation:

import {URLSearchParams} from "@angular/http";

et fonction:

getParam(){
  let params = new URLSearchParams(window.location.search);
  let someParam = params.get('someParam');
  return someParam;
}

Notice : elle n'est pas supportée par toutes les plateformes et semble être dans un état" expérimental "par des docs angulaires

tout d'abord, ce que j'ai trouvé en travaillant avec Angular2 est que l'url avec une chaîne de requête serait /path;query=value1

pour y accéder dans un composant que vous utilisez Il en est ainsi, mais suit maintenant un bloc de code:

    constructor(params: RouteParams){
    var val = params.get("query");
    }

quant à la raison pour laquelle il serait supprimé lorsque vous chargez le composant, ce n'est pas un comportement par défaut. J'ai vérifié spécifiquement dans un projet de test propre et n'ai pas été redirigé ou changé. Est-ce une route par défaut ou autre chose de spécial sur le routage?

lisez à propos du routage avec les chaînes de requête et les params dans le tutoriel Angular2 à https://angular.io/docs/ts/latest/guide/router.html#!#requête-paramètres

vous pouvez obtenir les paramètres de requête lorsqu'ils sont passés dans L'URL en utilisant ActivatedRoute comme indiqué ci-dessous: -

url:- http:/domain.com?test=abc

import { Component } from '@angular/core';
import { ActivatedRoute }     from '@angular/router';

@Component({
  selector: 'my-home'
})
export class HomeComponent {

  constructor(private sharedServices : SharedService,private route: ActivatedRoute) { 
    route.queryParams.subscribe(
      data => console.log('queryParams', data['test']));
  }

}

Obtenir l'URL de param comme un objet.

import { Router } from '@angular/router';
constructor(private router: Router) {
    console.log(router.parseUrl(router.url));
}

si vous ne voulez obtenir le paramètre query qu'une seule fois, la meilleure façon est d'utiliser la méthode take donc vous n'avez pas besoin de vous soucier de désabonnement. Voici l'extrait simple: -

constructor(private route: ActivatedRoute) {
  route.snapshot.queryParamMap.take(1).subscribe(params => {
     let category = params.get('category')
     console.log(category);
  })
}

Note: Supprimer take(1) si vous voulez utiliser des valeurs paramétriques à l'avenir.

maintenant, c'est:

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

vous ne pouvez pas obtenir un paramètre du RouterState s'il n'est pas défini dans la route, donc dans votre exemple, vous devez analyser le querystring...

voici le code que j'ai utilisé:

let re = /[?&]([^=#&]+)=([^&#]*)/g;
let match;
let isMatch = true;
let matches = [];
while (isMatch) {
    match = re.exec(window.location.href);
    if (match !== null) {
        matches[decodeURIComponent(match[1])] = decodeURIComponent(match[2]);
        if (match.index === re.lastIndex) {
            re.lastIndex++;
        }
    }
    else {
        isMatch = false;
    }
}
console.log(matches);

une variante de la solution de Steve Paul, je préfère éviter les ivars inutiles, donc pour supprimer la nécessité de l'appel unsubscribe() pendant ngOnDestroy , il suffit de souscrire à l'observable avec take(1) et il sera automatiquement libéré après la première valeur-prévenir les fuites de mémoire

import 'rxjs/add/operator/take';
import {Router, ActivatedRoute} from '@angular/router';

@Component({...})
export class MyComponent implements OnInit {

  constructor(private activatedRoute: ActivatedRoute) {
    this.activatedRoute.params.take(1).subscribe((params: any) => {
      let userId = params['userId'];
      console.log(userId);
    });
  }

}

vous avez juste besoin d'injecter ActivatedRoute dans le constructeur et puis juste accéder params ou queryParams sur elle

constructor(private route:AcitvatedRoute){}
ngOnInit(){
        this.route.queryParams.subscribe(params=>{
        let username=params['username'];
      });
 }

dans certains cas, ça donne quelque chose en NgOnInit ...peut-être à cause de l'appel init avant l'initialisation des params dans ce cas vous pouvez y arriver en demandant observable d'attendre un certain temps par la fonction debounceTime(1000)

E. g = >

 constructor(private route:AcitvatedRoute){}
    ngOnInit(){
            this.route.queryParams.debounceTime(100).subscribe(params=>{
            let username=params['username'];
          });
     }

debounceTime () émet une valeur à partir de la source observable seulement après un laps de temps donné passé sans autre émission de la source

j'espère que ça aidera quelqu'un d'autre.

la Question ci-dessus indique que la valeur param de la requête est nécessaire après que la page a été redirigée et nous pouvons supposer que la valeur du snapshot (l'alternative non observable) serait suffisante.

personne ici n'a parlé de snapshot.paramMap.obtenez de la documentation officielle .

this.route.snapshot.paramMap.get('id')

donc, avant de l'envoyer, ajoutez ceci dans Envoyer / réorienter le composant:

import { Router } from '@angular/router';

puis ré-orienter comme l'un ou l'autre (documenté ici ):

this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);

ou tout simplement:

this.router.navigate(['/heroes', heroId ]);

assurez-vous d'avoir ajouté ceci dans votre module de routage comme documenté ici :

 { path: 'hero/:id', component: HeroDetailComponent }

et enfin, dans votre composant qui doit utiliser le paramètre query

• ajouter les importations (documentées) ici ):

  import { Router, ActivatedRoute, ParamMap } from '@angular/router';
  

• injecter par la voie activée

(la documentation importe également switchMap et injecte aussi Router et HeroService - mais ils sont nécessaires pour l'alternative observable seulement - ils ne sont pas nécessaires lorsque vous utilisez snapshot alternative comme dans notre cas ):

    constructor(
      private route: ActivatedRoute
    ) {}

• et obtenir la valeur dont vous avez besoin ( documenté ici ):

  ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');
  }
  

NOTE: SI VOUS AJOUTEZ ROUTING-MODULE À UN MODULE DE FONCTIONNALITÉS (COMME INDIQUÉ DANS LA DOCUMENTATION), ASSUREZ-VOUS QUE DANS APP.MODULE.ts que le MODULE de routage vient avant AppRoutingModule (ou un autre fichier avec des routes app au niveau de la racine) dans les importations: [] . Dans le cas contraire, les ROUTES de fonctionnalités ne seront pas trouvées (car elles viendraient après { path:'**', redirectTo: '/not-found' } et vous ne verriez que le message not-found).