web-dev-qa-db-fra.com

Comment utiliser ActivatedRoute dans Angular 5?

J'essaie de faire exactement la même chose que dans ce post: Angular 4 get queryString

J'utilise Angular 5.2.5.

ActivatedRoute semble être la chose à utiliser pour récupérer les valeurs de la chaîne de requête de l'URL lors de la première visite de l'utilisateur sur le site Web. Cependant, je n'arrive pas à comprendre ce que je dois importer pour pouvoir utiliser ActivatedRoute.

Quelqu'un pourrait-il spécifier exactement ce qui doit être ajouté au fichier app.module.ts et au fichier component.ts où j'essaie d'utiliser ActivatedRoute?

Ce message spécifie l'ajout de routage au tableau des importations du @NgModule: Aucun fournisseur pour ActivatedRoute - Angular 2 RC5 . Cependant, je n'ai pas d'application. Fichier .ts. Dois-je créer un fichier app.routing.ts pour utiliser ActivatedRoute?

angular5query-stringangular-activatedroute
6
Mark Nugent

ActivatedRoute Contient les informations sur un itinéraire associé à un composant chargé dans une prise. Il peut également être utilisé pour transmettre des données de one component À another component En utilisant une route telle que Id, drapeau, état, etc.

http://localhost:4200/quiz/edit_quiz/032

032 Étant id du quiz que vous souhaitez modifier.

Obtenez cet identifiant dans votre composant (dans mon cas, qu'il soit edit_quiz.compontent.ts) à utiliser en utilisant Activated Route.

Étape 1: Importez ActivatedRoute à partir du module de routeur.

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

Étape 2: Injectez ActivatedRoute dans le constructeur.

  constructor(private activatedRoute: ActivatedRoute) { }

Étape 3: Récupère l'id sur une variable locale nommée quizId dans ngOnInit(){}

   ngOnInit() {
    this.quiz_id = this.activatedRoute.snapshot.params['id'];
   }

Maintenant, nous avons id dans edit_quiz.component.ts À utiliser.

3
Mr. Droid

J'ai fait les deux changements suggérés par Arun. Ensuite, pour corriger l'erreur "Aucun fournisseur pour ActivatedRoute", j'ai apporté les modifications indiquées ci-dessous.

1) J'ai ajouté cette ligne au app.module.ts:

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

2) J'ai ajouté cette ligne au tableau des importations du @NgModule dans app.module.ts:

RouterModule.forRoot([])

Cet article m'a donné le correctif: Erreur angulaire: aucun fournisseur pour ActivatedRoute

Maintenant, il compile. Hourra!

2
Mark Nugent

Vous devez importer ActivatedRoute depuis @ angular/router comme

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

puis ajoutez cette ligne au tableau des importations du @NgModule dans app.module.ts:

imports:[
        ........,
        RouterModule.forRoot()
],

alors vous pouvez utiliser n'importe où comme ci-dessous:

constructor(private route: ActivatedRoute) {
     console.log(route.snapshot.queryParamMap); // this
}
// or
queryString : string;
getQueryString(){
   this.queryString = this.route.queryParamMap.get('myQueryParam');
}

Non. Vous n'avez pas besoin de app.routing.ts si vous n'avez pas à parcourir les pages de votre application.

1
Arun Amatya

ActivatedRoute

Je suis en retard dans la conversation, mais j'espère que ce qui suit fonctionne pour les futurs programmeurs qui rencontrent le même problème.

importer l'ActivatedRoute

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

Injecter l'injection de dépendance

constructor(
    private route: ActivatedRoute,
  ) { }

et pour saisir l'identifiant du lien, vous pouvez utiliser ce qui suit

  ngOnInit() {
  this.route.paramMap.subscribe(params => {
    this.product = products[+params.get('productId')];
  });
}
0
Mickey Mouse