Как получить параметр на маршруте Angular2 в Angular способом?

Маршрут

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

Компонент

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

Пример ссылки: http://localhost:8099/#/companies/bdo

Я хочу получить String bdo в приведенном выше примере.

Я знаю, что могу получить ссылку, используя window.location.href и разбить на массив. Итак, я могу получить последний параметр, но я хочу знать, есть ли способ сделать это в angular2.

Любая помощь будет оценена по достоинству. Благодаря

Ответы

Ответ 1

Если вы введете ActivatedRoute в свой компонент, вы сможете извлечь параметры маршрута

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

Если вы ожидаете, что пользователи будут перемещаться из банка в банк напрямую, не переходя сначала к другому компоненту, вы должны получить доступ к этому параметру через наблюдаемый:

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

Для документов, включая различия между двумя просмотрите эту ссылку и выполните поиск "activeroute"

Обновление: август 2017

Так как Angular 4, params устарели в пользу нового интерфейса paramMap. Код для проблемы выше должен работать, если вы просто замените один на другой.