Angulaire 2/4 Comment obtenir les paramètres de la route dans l'app composant?

Angulaire 2/4 Comment obtenir les paramètres de la route dans l'app composant?Comme je suis nouveau sur angulaire 2/4 je vais avoir de la difficulté à mettre en place une nouvelle application que par mon besoin.

Je suis en train de créer une application qui sera appelé à d'autres d'une autre application. Appel de l'application enverra un certain nombre de paramètres comme le jeton, le nom d'utilisateur, id de l'application et etc.

Maintenant, comme dans Angulaire 2/4, app.composant est notre atterrissage composant et chaque première demande d'aller à travers elle. Donc, je veux obtenir ces paramètre, ici, dans l'application de la composante et de la charge à l'utilisateur de détails, de faire une session locale et le déplacer vers d'autres choses.

problème, c'est quand j'essaie d'accéder à ces paramètres, je suis rien.

Voici l'URL qui va commencer mon angulaire de l'application:
http://localhost:86/dashboard?username=admin&token=xyz&appId=8

Voici mon fichier de routage code:

JS:

const routes: Routes = [
  {
    path: 'dashboard/:username, token', component: AppComponent
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {

}

Voici mon App Code de Composant:

JS:

import { Component, OnInit } from '@angular/core';
import { AuthenticationService } from 'app/services/authentication/authentication.service';
import { User } from 'app/models/user/user';
import { AppConfig } from 'app/helpers/AppConfig';
import { ActivatedRoute, Router } from '@angular/router';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  _user: User = new User();
  obj: any;
  error: any;

  loginName: string;
  private id: any;

  constructor(
    private authenticationService: AuthenticationService,
    private config: AppConfig,
    private route: ActivatedRoute,
    private router: Router

  ) { }

  ngOnInit() {    
    this.loadCurrentUserDetail();
    this.getParamValues()

  }

  getParamValues() {
    this.id = this.route.queryParams.subscribe(params => {      
       this.loginName = params['username']; 
    });
  }

Ici params est vide ne sais pas pourquoi?

Merci d'avance!

Dans l'image params objet n'a rien.

InformationsquelleAutor Praveen Rawat | 2017-07-25
  1. 16

    C'est votre façon d'aller dans angulaire 5+:

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

constructor(private route: ActivatedRoute){}
ngOnInit() {
    console.log(this.route.snapshot.params['username']);
}

    Mise à jour pour une raison pourquoi les gens sont downvoting:
    Au-dessus de la méthode de capture instantanée. Méthode de capture instantanée vous donne juste le résultat une fois que vous lancez le composant. Ce qui permettra de continuer à travailler si vous changer l'itinéraire ou de détruire le composant et de lancer de nouveau seul.

    Une solution pour le downvoters et/ou ceux qui veulent mettre à jour les param chaque fois le changement d'itinéraire sera:

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

constructor(private route: ActivatedRoute){}
ngOnInit() {
    console.log(this.route.snapshot.params['username']); //works first time only
/** For later use, updates everytime you change route*/
    this.route.params.subscribe((parmas) => {console.log(params['username'])});
}
    • Pourquoi est-ce une réponse downvoted? C'est un propre bonne solution de travail dans le courant Angulaire version (6).
    • Les gens ont leurs raisons de la haine, même le meilleur, de plus c'est juste une autre réponse
    • La bonne solution. J'utilise une version alternative pour récupérer les valeurs sur ngOnInit à l'aide de " cela.l'itinéraire.params' directement, sans le "instantané". Quelqu'un sait quelle est la différence?
    InformationsquelleAutor Black Mamba
  2. 10

    Ce post résolu le problème. ici

    J'avais besoin de créer un composant distinct de la Racine et que j'ai gardé mon Routeur-Prise et l'ajout de ce composant que mon bootstrap module et cela a fonctionné!! Je n'ai pas la réputation de plus de 50 si j'avais que je ne l'a remercié de l'avoir sur le même poste. Merci man @Fabio Antunes

    InformationsquelleAutor Praveen Rawat