web-dev-qa-db-fra.com

Comment obtenir un paramètre sur la route Angular2 de manière Angular?

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 Stringbdo dans l'exemple de lien ci-dessus.

Je suis conscient que je peux obtenir le lien en utilisant window.location.href et le scinder en tableau. Donc, je peux obtenir le dernier paramètre, mais je veux savoir s’il existe une méthode appropriée pour le faire de la manière angular.

Toute aide serait appréciée. Merci

angularangular2-routing
57
devhermluna

Si vous injectez ActivatedRoute dans votre composant, vous pourrez extraire les paramètres de route.

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 attendez des utilisateurs qu'ils naviguent directement d'une banque à l'autre, sans passer d'abord par un autre composant, vous devez accéder au paramètre via un élément observable:

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

Pour la documentation, y compris les différences entre les deux consultez ce lien et recherchez " Activated "

Mise à jour: août 2017

Depuis Angular 4, params sont obsolètes en faveur de la nouvelle interface paramMap . Le code du problème ci-dessus devrait fonctionner si vous substituez simplement l'un à l'autre.

131
BeetleJuice

À partir de Angular 6+, le traitement est légèrement différent de celui des versions précédentes. Comme @BeetleJuice le mentionne dans le réponse ci-dessus , paramMap est une nouvelle interface permettant d'obtenir les paramètres de route, mais l'exécution est légèrement différente dans les versions les plus récentes d'Angular. En supposant que cela soit 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 les deux, car lors du chargement direct de la page, je peux obtenir le paramètre ID, ainsi que si vous naviguez entre entités connexes, l'abonnement sera mis à jour correctement.

Source dans Angular Docs

16
KMJungersen