Wie erhalte ich Parameter auf Angular2-Route auf Angular-Weise?

Route

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

Komponente

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

Beispiel für einen Link: http://localhost:8099/#/companies/bdo

Ich möchte String bdo im obigen Beispiellink erhalten.

Mir ist bewusst, dass ich den Link mithilfe von window.location.href abrufen und in ein Array aufteilen kann. Ich kann also den letzten Parameter abrufen, möchte aber wissen, ob es eine geeignete Methode gibt, um dies auf eckige Weise zu tun.

Jede Hilfe wäre dankbar. Vielen Dank

Update: Sep 2019

Wie einige Leute erwähnt haben, sollte auf die Parameter in paramMapüber die gemeinsame MapAPI zugegriffen werden :

So erhalten Sie eine Momentaufnahme der Parameter, wenn Sie sich nicht darum kümmern, dass sie sich ändern:

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

Abonnieren und über Änderungen der Parameterwerte informiert werden (normalerweise aufgrund der Navigation des Routers)

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

Update: August 2017

Seit Angular 4 paramssind zugunsten der neuen Schnittstelle veraltet paramMap. Der Code für das obige Problem sollte funktionieren, wenn Sie einfach den anderen ersetzen.

Ursprüngliche Antwort

Wenn Sie ActivatedRouteIhre Komponente einfügen, können Sie die Routenparameter extrahieren

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

Wenn Sie erwarten, dass Benutzer direkt von Bank zu Bank navigieren, ohne zuvor zu einer anderen Komponente zu navigieren, sollten Sie über eine beobachtbare Datei auf den Parameter zugreifen:

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

Für die Dokumente, einschließlich der Unterschiede zwischen den beiden, überprüfen Sie diesen Link und suchen Sie nach " enabledroute "

Ab Angular 6+ wird dies etwas anders gehandhabt als in früheren Versionen. Wie @BeetleJuice in der obigen Antwort erwähnt , paramMaphandelt es sich um eine neue Schnittstelle zum Abrufen von Routenparametern, die Ausführung ist jedoch in neueren Versionen von Angular etwas anders. Angenommen, dies ist in einer Komponente enthalten:

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

Ich bevorzuge es, beide zu verwenden, da ich dann beim direkten Laden der Seite den ID-Parameter erhalten kann und auch beim Navigieren zwischen verwandten Entitäten das Abonnement ordnungsgemäß aktualisiert wird.

Quelle in Angular Docs