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


87

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

Odpowiedzi:


206

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


Czy istnieje ograniczenie, w którym komponenty załadowane do gniazda routera komponentu nadrzędnego będą widzieć różne parametry ActiveRoute - natknąłem się na przypadek, w którym rodzic widzi parametr, ale zawarte komponenty nie widzą tego samego parametru ...
Neoheurysta

Nie działało to dla mnie, ponieważ dodałem ActivatedRoute jako dostawcę dla mojego komponentu. Więc upewnij się, że tego nie robisz! Działa jak urok z kanciastym 4.2.4.
Thomas Webber

1
Dla paramMap, należy używać params.get('bank')zamiast.
zurfyx

Jaka jest różnica pomiędzy this.route.snapshot.paramMap.get('bank'); i this.route.snapshot.params.bank;?
Gil Epshtain

23

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


1
Dlaczego miałoby switchMapbyć tutaj wymagane? Czy subskrypcja nie zostanie wywołana również podczas bezpośredniego ładowania strony?
zmiażdżyć

4
@crush Z dokumentów, do których link powyżej: „Możesz pomyśleć o użyciu mapoperatora RxJS . Ale HeroServicezwraca on Observable<Hero>. switchMapZamiast tego spłaszczasz Observable z operatorem. switchMapOperator również anuluje poprzednie żądania w locie. Jeśli użytkownik ponownie przejdzie do ta trasa z nową, idpodczas gdy HeroServicewciąż pobiera stare id, switchMapodrzuca stare żądanie i zwraca bohatera do nowego id. "
KMJungersen
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.