Comment obtenir paramètre sur Angular2 route Angulaire de la sorte?

Route

const appRoutes: Routes = [
    { path: '', redirectTo: '/companies/unionbank', pathMatch: 'full'},
    { path: 'companies/:bank', component: BanksComponent },
    { path: '**', redirectTo: '/companies/unionbank' }
]

Composant

const NAVBAR = [
    { 
        name: 'Banks',
        submenu: [
            { routelink: '/companies/unionbank', name: 'Union Bank' },
            { routelink: '/companies/metrobank', name: 'Metro Bank' },
            { routelink: '/companies/bdo', name: 'BDO' },
            { routelink: '/companies/chinabank', name: 'China Bank' },
        ]
    },
    ...
]

Exemple de lien: http://localhost:8099/#/companies/bdo

Je veux obtenir String bdo dans l'exemple du lien ci-dessus.

Je suis conscient que je peux avoir le lien par l'aide de la fenêtre.emplacement.href et divisé en tableau. Donc, je peux obtenir le dernier param, mais je veux savoir si il y a une bonne méthode sur la façon de procéder dans angulaire façon.

Toute aide serait appréciée. Grâce

InformationsquelleAutor devhermluna | 2016-10-27
  1. 122

    Si vous injectez de l' ActivatedRoute dans votre composant, vous serez capable d'extraire les paramètres de l'itinéraire

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

constructor(private route:ActivatedRoute){}
bankName:string;

ngOnInit(){
    //'bank' is the name of the route parameter
    this.bankName = this.route.snapshot.params['bank'];
}

    Si vous prévoyez d'utilisateurs de naviguer à partir d'une banque à l'autre directement, sans passer à un autre composant d'abord, vous devez accéder à ce paramètre par le biais d'un observables:

    ngOnInit(){
    this.route.params.subscribe( params =>
        this.bankName = params['bank'];
    )
}

    Pour les docs, y compris les différences entre les deux consultez ce lien et de la recherche pour "activatedroute"

    Mise À Jour: Août 2017

    Depuis Angulaire 4, params ont été dépréciée en faveur de la nouvelle interface paramMap. Le code pour le problème ci-dessus devrait fonctionner si vous simplement se substituer l'un à l'autre.

    • Est-il une restriction sur lequel les composants chargés dans un routeur de sortie du composant parent pourrez voir les différentes ActiveRoute paramètres - j'ai couru dans un cas où le parent qui voit un paramètre, mais les autres composants contenus ne pas voir le même paramètre...
    • Il n'a pas de travail pour moi parce que j'ai ajouté le ActivatedRoute en tant que fournisseurs pour mon composant. Donc, assurez-vous de ne pas le faire ! Il fonctionne comme un charme angulaire 4.2.4.
    • Pour paramMap, vous devriez être en utilisant params.get('bank') à la place.
    InformationsquelleAutor BeetleJuice
  2. 14

    Comme Angulaire 6+, c'est traité un peu différemment que dans les versions précédentes. Comme @BeetleJuice mentionne dans le la réponse ci-dessus, paramMap est nouvelle interface pour obtenir paramètre de route, mais l'exécution est un peu différent dans les versions plus récentes de Anguleux. En supposant que c'est dans un composant:

    private _entityId: number;

constructor(private _route: ActivatedRoute) {
    //...
}

ngOnInit() {
    //For a static snapshot of the route...
    this._entityId = this._route.snapshot.paramMap.get('id');

    //For subscribing to the observable paramMap...
    this._route.paramMap.pipe(
        switchMap((params: ParamMap) => this._entityId = params.get('id'))
    );

    //Or as an alternative, with slightly different execution...
    this._route.paramMap.subscribe((params: ParamMap) =>  {
        this._entityId = params.get('id');
    });
}

    Je préfère utiliser à la fois parce qu'alors, sur directe du chargement de la page, je peux obtenir l'ID de paramètre, et aussi si la navigation entre les entités liées à l'abonnement de mise à jour correctement.

    Source Angulaire Docs

    • Pourquoi switchMap être nécessaire ici? Ne pas s'abonner me demande directe du chargement de la page ainsi?
    • À partir de la documentation liée ci-dessus: "Vous pourriez penser à utiliser la RxJS map de l'opérateur. Mais le HeroService retourne un Observable<Hero>. Afin de vous aplatir les Observables avec les switchMap opérateur à la place. Le switchMap opérateur annule le précédent en vol demandes. Si l'utilisateur ré-accède à cette route avec un nouveau id tandis que le HeroService est encore de la récupération de l'ancien id, switchMap les rejets, la vieille requête et retourne le héros de la nouvelle id."
    InformationsquelleAutor KMJungersen