web-dev-qa-db-fra.com

Angular 2 Vérifier si le paramètre de requête existe dans l'URL

Je dois vérifier si l'URL actuelle a une chaîne de requête.

uRL peut être 

http://localhost:4200/test?id=55555

ou

http://localhost:4200/test

J'ai utilisé 

this.route.queryParams
     .filter(params => 'id' in params)
     .map(params => params.id)
     .distinctUntilChanged()
     .subscribe(
     id=> {
                //check lead Id here
                console.log(id);
            }
     );

Mais cela ne fonctionne que quand il y a id dans l'URL. Vous ne savez pas comment vérifier s'il existe. 

angularangular2-routing
9
rishal

Je dirais en utilisant:

ngOnInit() {
 if (this.route.snapshot.queryParams['id']) {
      //do your stuff. example: console.log('id: ', this.route.snapshot.queryParams['id']);
 }
}

serait suffisant. N'oubliez pas d'initialiser private route: ActivatedRoute dans le constructeur et import { ActivatedRoute } from '@angular/router';

Puisque vous devez seulement vérifier s'il existe ou non. Si cela se produit, comme si vous ajoutiez un booléen pour vérifier si elle était définie ou non . S'il n'existe pas, rien ne se passera. Ensuite, si vous avez besoin de faire quelque chose ailleurs dans le composant, vous pouvez vérifier le boolean later si c'est vrai/faux en fonction de la façon dont vous le définissez plus tôt.

1
Mukyuu

Vous pouvez le vérifier directement dans votre fonction d’abonnement comme ci-dessous:

this.route.queryParams.subscribe((params)=> {
  //check lead Id here
  if(params['id']){
    console.log(params['id']);
  } else {
    console.log('id not found in params')
  }
});
8
ranakrunal9

Préliminaire

Quand on s'abonne à queryParams comme ci-dessous, la variable params contient un objet où toutes les clés sont les paramètres de requête et la valeur peut être une valeur unique ou un tableau de valeurs. On peut faire un console.log(params); pour vérifier ce résultat. Par exemple:

quand url est: http://example.com/?lion=10&lion=15&cat=20

et nous essayons ensuite de voir ce que params contient:

this.route.queryParams.subscribe((params) => {
    console.log(params);
});

le résultat serait un objet où les clés sont lion et cat mais les valeurs sont un tableau pour lion car il a deux occurrences et pour cat une valeur unique:

{ lion: [10, 15], cat:20 }

Répondant maintenant à la question

Prenons l'URL comme suit: http://example.com/?id&name=james

On peut remarquer qu’il n’ya pas de valeur pour id. Il est possible qu'une URL ait juste une clé mais pas de valeur et pourtant nous voudrions savoir que la clé est au moins présente. Si nous devions faire:

if(params['id']){
    // do something
}

cette condition retournera false même si l'identifiant de clé est présent. Nous pourrions en fait vouloir faire quelque chose lorsque la clé seule est présente et autre chose lorsque la clé et la valeur sont présentes. Dans ce cas, nous pouvons utiliser la bibliothèque lodash pour trier efficacement les résultats de clé et clé/valeur. Après avoir importé la bibliothèque lodash dans le projet. On peut utiliser _.has pour faire ceci:

// check if id key is present in params object first
if(_.has(params, 'id')) {
    if(params['id']=="") {
      // id key is present but has no value so do something
    } else {
      // id key is present and has a value as well so do something else
    }
} else {
    // since id key itself is not present do something totally different here
}

Bien entendu, le code ci-dessus suppose que la clé id n'apparaît qu'une seule fois dans les paramètres d'url. Sinon, il faudrait parcourir un tableau et vérifier chaque valeur.

0
Sriram Ranganathan

Je suppose que vous utilisez le Système de routage angulaire ici. Ensuite, injectez la route actuellement activée dans le constructeur de votre composant comme suit:

constructor(private activatedRoute: ActivatedRoute)

Puis, enregistrez votre ngOnInit () comme ceci:

ngOnInit() {
    console.log("Hello ngOnInit");
    let token = null;
    this.activatedRoute.queryParamMap.subscribe((next : ParamMap) => {
      token = next.get("token")

      if (token) {
        console.log(token);
      } else {
        console.log("no token given in url");
      }
    });
  }
0
Rainer Feike

Étant donné que personne n'a mentionné l'utilisation de snapshot, je fournis ma réponse avec celle-ci. Si vous n'avez pas réellement besoin d'un observable, ce qui signifie que l'URL est modifiée une fois (par exemple, l'utilisateur accède à la page d'édition), vous pouvez tirer parti de l'option Instantané, qui est beaucoup plus succincte. Donc, dans votre application, vous pouvez faire:

constructor(private route: ActivatedRoute) {

}

ngOnInit(): void { 
    if (this.route.snapshot.params['id']) {
        // id exists, so do something with it.

    }
}

Mais gardez à l’esprit ce point:

Rappelez-vous: vous obtenez uniquement la valeur initiale de la mappe de paramètres avec cette technique. Tenez-vous en à la méthode paramMap observable s’il ya même une chance que le routeur puisse réutiliser le composant. Cet échantillon reste avec la stratégie observable paramMap au cas où.

Source: Instantané: l'alternative non observable

0
jpgrassi

c'est le moyen le plus simple:

this.route.queryParams.subscribe(
    (params: Params) => {
        if (params.hasOwnProperty('id')) { console.log(params['id']); }
    }
);
0
Amin Adel