Jak uzyskać parametr na trasie Angular2 w sposób Angular?

Trasa

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

Składnik

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' },
        ]
    },
    ...
]

Przykład linku: http://localhost:8099/#/companies/bdo

Chcę uzyskać String bdo w przykładowym linku powyżej.

Jestem świadomy, że mogę uzyskać link za pomocą window.location.href i podzielić na tablicę. Mogę więc uzyskać ostatni parametr, ale chcę wiedzieć, czy istnieje właściwa metoda robienia tego pod kątem.

Każda pomoc będzie mile widziana. Dzięki

Aktualizacja: wrzesień 2019 r

Jak kilka osób wspomniało, dostęp do parametrów w programie paramMapnależy uzyskać za pomocą wspólnego Mapinterfejsu API:

Aby uzyskać migawkę parametrów, gdy nie obchodzi Cię, że mogą się zmienić:

this.bankName = this.route.snapshot.paramMap.get('bank');

Subskrybować i otrzymywać powiadomienia o zmianach wartości parametrów (zwykle w wyniku nawigacji routera)

this.route.paramMap.subscribe( paramMap => {
    this.bankName = paramMap.get('bank');
})

Aktualizacja: sierpień 2017 r

Od czasu Angular 4 paramszostały wycofane na korzyść nowego interfejsu paramMap. Kod powyższego problemu powinien zadziałać, jeśli po prostu zamienisz jeden na drugi.

Oryginalna odpowiedź

Jeśli wstrzykniesz ActivatedRouteswój komponent, będziesz mógł wyodrębnić parametry trasy

    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'];
    }

Jeśli oczekujesz, że użytkownicy będą nawigować od banku do banku bezpośrednio, bez przechodzenia najpierw do innego komponentu, powinieneś uzyskać dostęp do parametru poprzez obserwowalne:

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

W przypadku dokumentów, w tym różnic między nimi, sprawdź ten link i wyszukaj „ Activatedroute ”

W Angular 6+ jest to obsługiwane nieco inaczej niż w poprzednich wersjach. Jak @BeetleJuice wspomina w powyższej odpowiedzi , paramMapjest to nowy interfejs do pobierania parametrów trasy, ale wykonanie jest nieco inne w nowszych wersjach Angular. Zakładając, że jest to komponent:

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');
    });
}

Wolę używać obu, ponieważ wtedy przy bezpośrednim ładowaniu strony mogę uzyskać parametr ID, a także w przypadku nawigacji między powiązanymi podmiotami subskrypcja zaktualizuje się poprawnie.

Źródło w Angular Docs